Javascript 帆布裁剪，带“；羽毛“；边缘效应
我目前正在HTML5画布上绘制一幅图像，并用一个弧形遮罩它，在绘制图像之前调用clip（），以便只显示弧形中的部分。我怎样才能使这个弧的边缘光滑？通过谷歌搜索，我知道没有简单的方法可以简单地将“羽毛”应用到画布绘制的形状上。当图像的边缘与弧接触时，图像的像素数据会发生什么变化？谢谢你的帮助 以下是我的代码的相关部分：Javascript 帆布裁剪，带“；羽毛“；边缘效应,javascript,canvas,html5-canvas,Javascript,Canvas,Html5 Canvas,我目前正在HTML5画布上绘制一幅图像，并用一个弧形遮罩它，在绘制图像之前调用clip（），以便只显示弧形中的部分。我怎样才能使这个弧的边缘光滑？通过谷歌搜索，我知道没有简单的方法可以简单地将“羽毛”应用到画布绘制的形状上。当图像的边缘与弧接触时，图像的像素数据会发生什么变化？谢谢你的帮助 以下是我的代码的相关部分： ctx.arc(canvas.width/2, canvas.height/2, 250, 0, 6.28, false);//draw the circle ctx.restor
ctx.arc(canvas.width/2, canvas.height/2, 250, 0, 6.28, false);//draw the circle
ctx.restore();
ctx.save();
ctx.drawImage(background, 0, 0,
background.width * scale, background.height * scale);
ctx.clip();//call the clip method so the next render is clipped in last path
ctx.drawImage(img, 0, 0,
img.width * scale, img.height * scale);
ctx.closePath();
ctx.restore();
我尝试用您的方法替换arc（），但我很难让它响应鼠标事件上发生的转换 更新2017/7 由于给出了这个答案，现在在较新的浏览器中提供了一个新选项，即上下文上的属性。请注意，目前并非所有浏览器都支持它 对于这样做的浏览器，我们可以减少代码并删除临时画布，如下所示：
var ctx=demo.getContext（'2d'）；
ctx.fillStyle='#f90'；
ctx.fillRect（0，0，demo.width，demo.height）；
clipArc（ctx，200，200，150，40）；
函数clipArc（ctx，x，y，r，f）{
ctx.globalCompositeOperation='destination out'；
ctx.filter=“模糊（25px）”；/“羽毛”
ctx.beginPath（）；
弧（x，y，r，0，2*Math.PI）；
ctx.fill（）；
//重置组件模式和过滤器
ctx.globalCompositeOperation='destination out'；
ctx.filter=“无”；
}body{背景：#07c}