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

【问题标题】：html5 canvas overlay cutout workaround in safarisafari 中的 html5 画布覆盖切口解决方法
【发布时间】：2014-04-29 04:58:04
【问题描述】：

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

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

我不确定我能否很好地解释这一点，因此最好查看jsFiddle example here 以了解我想要做什么。

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

【问题讨论】：

标签： html html5-canvas

【解决方案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（不是颜色）将决定孔的可见度。

希望这会有所帮助。

【讨论】：