Javascript 带圆角的Canvas clearRect

我用

ctx.clearRect（）

切下了一块长方形画布。它在图像中生成一个矩形透明区域。但是有没有可能用圆角来切割呢

就这样,

我的代码：

函数createHolesInBg（）{
//将图像覆盖在视频上，并切割孔以穿透视频
var image=document.getElementById（'bg-one'）；
var canvas=document.getElementById（“窗口画布”）；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（图像，0,0）；
setTimeout（函数（）{
ctx.clearRect（390150400300）；
}, 0);
};
//播放视频5秒钟，然后开始切割一些孔覆盖bg
setTimeout（函数（）{
createHolesInBg（）；
}, 0);
//15秒后将视频静音，因为它在博客文章中变得烦人
setTimeout（函数（）{
var video=document.getElementById（“video elm”）；
video.muted=false；
}, 0);
正文{
背景色：#000；
保证金：0；
填充：0；
}
#窗口画布{指针事件：无；}

您的浏览器不支持HTML5视频。
我在Github上找到了以下代码：

方法是首先创建所需形状的剪裁区域，然后执行包含整个剪裁区域的
clearRect

您可以按照以下示例代码在此处创建圆角矩形：

把这两件事结合起来，你就会得到你想要的结果

function clearRoundRect(context, x, y, width, height, radius) {
  context.save();
  context.beginPath();
  roundRect(context, x, y, width, height, radius, false, true);
  context.clip();
  context.clearRect(x, y, width, height);
  context.restore();
}

创建圆角矩形路径
剪掉它
清除整个画布

函数roundRect（ctx、x、y、宽度、高度、半径）{
如果（半径类型==“未定义”）{
半径=5；
}
if（半径类型==“编号”）{
半径={
tl：半径，
tr：半径，
比尔：半径，
bl：半径
};
}否则{
var defaultRadius={
tl:0，
tr:0，
比尔：0，
基本法:0
};
用于（默认半径中的var侧）{
半径[侧]=半径[侧]| |默认半径[侧]；
}
}
ctx.beginPath（）；
ctx.moveTo（x+radius.tl，y）；
ctx.lineTo（x+宽度-半径tr，y）；
ctx.四次曲线（x+宽度，y，x+宽度，y+半径.tr）；
ctx.lineTo（x+宽度，y+高度-半径.br）；
ctx.直角曲线（x+宽度，y+高度，x+宽度-半径。br，y+高度）；
ctx.lineTo（x+半径.bl，y+高度）；
ctx.直角曲线（x，y+高度，x，y+高度-半径.bl）；
ctx.lineTo（x，y+半径tl）；
ctx.四次曲线（x，y，x+半径tl，y）；
ctx.closePath（）；
}
函数createHolesInBg（）{
//将图像覆盖在视频上，并切割孔以穿透视频
var image=document.getElementById（'bg-one'）；
var canvas=document.getElementById（“窗口画布”）；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（图像，0,0）；
setTimeout（函数（）{
roundRect（ctx、390、150、400、300、50）；
ctx.clip（）；
clearRect（0，0，canvas.width，ctx.canvas.height）；
}, 0)
}
//播放视频5秒钟，然后开始切割一些孔覆盖bg
window.onload=函数（）{
setTimeout（函数（）{
createHolesInBg（）；
}, 0);
}
//15秒后将视频静音，因为它在博客文章中变得烦人
setTimeout（函数（）{
var video=document.getElementById（“video elm”）；
video.muted=false；
}, 0);
正文{
背景色：#000；
保证金：0；
填充：0；
}
#窗口画布{
指针事件：无；
}

您的浏览器不支持HTML5视频。