Question

我正在尝试创建一个可以突出显示页面某些部分的叠加层。我想到的最好的方法是使用适合页面的画布，绘制我需要的形状，并使用这个技巧绘制一个矩形：

ctx.rect(canvas.width, 0, 0 - canvas.width, canvas.height);

我不确定我能解释得这么好，所以最好看看jsFiddle example here以了解我想要做的事情。

除了Safari之外，每个浏览器都能完美运行。有没有办法在Safari中实现这种效果？

Answer 1

您可以先尝试填充整个画布，然后使用复合模式敲除形状。

示例：

ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(canvas.width, 0, 0 - canvas.width, canvas.height);

// next shape will punch hole in the draw rectangle above
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = "rgba(0, 0, 0, 1)";  // make sure alpha is 100%

ctx.beginPath();
ctx.moveTo(300, 60);
ctx.arc(300, 60, 50, 0, 2 * Math.PI);
ctx.moveTo(500, 160);
ctx.arc(500, 160, 50, 0, 2 * Math.PI);
drawEllipse(ctx, 103, 23, 100, 30)
drawEllipse(ctx, 503, 23, 100, 30)
ctx.fill();

ctx.globalCompositeOperation = 'source-over';  // reset comp. mode

<强> Modifed fiddle here

Alpha（不是颜色）将决定洞的可见程度。

希望这有帮助。

在safari中的html5画布覆盖剪切解决方法

1 个答案: