Javascript 如何设置画布中剩余空间的样式

我有一张画布，上面有一个图像，从一端到另一端填充。我想设计它的风格，突出面部区域的重点

下面是我想要实现的目标

以下是我到目前为止的情况：

注：面部区域应透明，其余部分模糊

这是我的密码：

var ctx = context.drawImage(, 0, 0, 500, 500);
drawROI(ctx, width / 4, 50, 250, 350);

drawROI(ctx, x, y, w, h) {
  var kappa = 0.5522848,
    ox = (w / 2) * kappa,
    oy = (h / 2) * kappa,
    xe = x + w,
    ye = y + h,
    xm = x + w / 2,
    ym = y + h / 2;

  // Draw Oval
  ctx.beginPath();
  ctx.moveTo(x, ym);
  ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
  ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
  ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
  ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
  ctx.closePath();
  ctx.lineWidth = 5;
  ctx.stroke();
  ctx.strokeStyle = "#999";

  // Draw Rectange
  ctx.beginPath();
  ctx.rect(0, 0, this.video.width, this.video.height);
  ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
  ctx.fill();
  ctx.stroke();
}

注意：

drawROI

是一切发生的地方。画布上已经有了一个图像，然后我画了一个椭圆形，然后画了一个矩形。我的想法是把矩形推到后面，让人脸清晰地显示在椭圆形中

如何实现上图1所示的类似UI

---

谢谢。

我想这是实时的。你将需要创建一个2画布，以帮助与外汇

磨砂玻璃在一层上。为避免设置模糊过滤器开销，过滤器始终保持打开状态

第二层是插入窗口。绘制一个椭圆，然后使用复合操作将图像覆盖在椭圆上。“源代码在”（仅设置的像素会更改）

最后一步将两个层绘制到画布上，然后添加边框和高亮显示为椭圆

演示有一个随机图像，并对其位置设置动画（只是为了检查性能，因为模糊可能代价高昂）

const ctx=canvas.getContext（“2d”）；
ctx.fillText（“正在加载图像，请稍候”，10,20）
Math.TAU=Math.PI*2；
const img=新图像；
img.src=”http://www.createjs.com/demos/_assets/art/flowers.jpg";
img.onload=（）=>{
//背景
常量blurAmount=12；//以像素为单位
const glassBlur=“blur”（+blurAmount+“px）”；//模糊过滤器
const glassColor=“#EEE”；
常数玻璃不透明度=0.45；
常量面半径2=画布高度*（1/4）；
const faceRadius1=canvas.width*（1/3）；
const borderWidth=canvas.width*（1/25）；
常量insetBorderColor=“#999”；
const highlightColor=“255255255”；
//背景图像中有一块磨砂玻璃
const bg=document.createElement（“画布”）；
bg.width=canvas.width；
bg.height=canvas.height；
bg.ctx=bg.getContext（“2d”）；
bg.ctx.drawImage（img，0,0）；
bg.ctx.filter=glassBlur；//尽早设置过滤器很重要，否则会导致
//减速是在飞行中完成的
//创建窗口的遮罩
const windowMask=document.createElement（“画布”）；
windowMask.width=canvas.width；
windowMask.height=canvas.height；
windowMask.ctx=windowMask.getContext（“2d”）；
//为高光创建渐变
const highlight=ctx.createLinearGradient(
0,
canvas.height/2-面半径1+边框宽度，
0,
canvas.height/2+面半径1-边框宽度，
);
highlight.addColorStop（0，“rgba（“+highlightColor+”，1）”）；
highlight.addColorStop（0.25，“rgba（“+highlightColor+”，0.4）”）；
highlight.addColorStop（0.5，“rgba（“+highlightColor+”，0）”）；
highlight.addColorStop（0.75，“rgba（“+highlightColor+”，0.4）”）；
highlight.addColorStop（1，“rgba（“+highlightColor+”，1）”）；
ctx.lineCap=“round”；//用于突出显示
var x，y；//演示图像的位置
//为运动图像设置动画
请求动画帧（循环）；
函数循环（时间）{
x=-（数学cos（时间/2000）*20+20）；
y=-（数学sin（时间/2000）*20+20）；
霜冻（img）；
面窗（img）；
drawFace（）；
请求动画帧（循环）；
}
//将磨砂玻璃绘制到背景画布
功能霜（img）{
常数w=bg.width；
常数h=背景高度；
bg.ctx.drawImage（img，x，y）；
bg.ctx.fillStyle=玻璃颜色；
bg.ctx.globalAlpha=玻璃不透明度；
bg.ctx.fillRect（-blurAmount，-blurAmount，w+blurAmount*2，h+blurAmount*2）；
bg.ctx.globalAlpha=1；
}
//创建插入窗口
功能面窗口（img）{
常数w=窗口掩码宽度；
常数h=窗口掩码高度；
windowMask.ctx.clearRect（0,0,w,h）；
windowMask.ctx.beginPath（）；
windowMask.ctx.ellipse（w/2，h/2，faceRadius1，faceRadius2，0，0，Math.TAU）；
windowMask.ctx.fill（）；
windowMask.ctx.globalCompositeOperation=“来源于”；
windowMask.ctx.drawImage（img，x，y，）；//绘制面
windowMask.ctx.globalCompositeOperation=“源代码结束”；
}
//把它们放在一起。
函数drawFace（）{
const w=画布宽度；
常数h=画布高度；
ctx.drawImage（bg，0，0）；//玻璃画
drawImage（windowMask，0，0）；//在窗口中绘制面
//划界
ctx.lineWidth=边框宽度；
ctx.strokeStyle=插入顺序颜色；
ctx.beginPath（）；
ctx.椭圆（w/2，h/2，面半径1，面半径2，0，0，数学τ）；
ctx.stroke（）；
//画亮点
ctx.strokeStyle=高光；//渐变
ctx.globalCompositeOperation=“打火机”；
ctx.globalAlpha=0.65；
ctx.beginPath（）；
ctx.椭圆（w/2，h/2，面半径1-边界宽度*2，面半径2-边界宽度*2，0，0，Math.PI/2）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.椭圆（w/2，h/2，面半径1-边界宽度*2，面半径2-边界宽度*2，0，Math.PI，Math.PI*1.5）；
ctx.stroke（）；
ctx.globalCompositeOperation=“源代码结束”；
ctx.globalAlpha=1；
}
}

canvas{border:2px纯黑；}

---

可以在整个图像上应用所有需要的效果，然后在所有效果的顶部绘制清晰图像的需要部分

给定原始图像：

Canvas属性可用于生成各种效果。例如，在这里，我们启用模糊和深褐色过滤器，然后在绘制图像时，将应用这些效果

context.filter = 'blur(4px) sepia(1)';
context.drawImage(image, 0, 0, 400, 400);
context.filter = 'none';

然后，我们需要从该图像中清除一个形状（在您的情况下，它是一个），以便稍后可以用

context.globalCompositeOperation = 'destination-out';
context.ellipse(200, 80, 80, 100, 0, 0, 2 * Math.PI);
context.fill();

context.globalCompositeOperation = 'destination-atop';
context.drawImage(image, 0, 0, 400, 400);