画布合成和剪切效果

Question

使用 HTML5 Canvas，我基本上绘制了一个彩色矩形。现在我正在为同一个矩形绘制一个黑色的宽笔画，但使用全局复合运算符 Destination-In。我的预期结果是有一个半宽的红色笔触，没有别的，因为通过 Destination-In 绘制笔触应该只绘制画布中红色矩形“击中”笔触的部分。但结果是红色矩形的填充也使它穿过笔划之外..

我是不是误会了什么？这是实际使用的代码：

var ctx2 = document.getElementById('canvas2').getContext('2d');

ctx2.fillStyle = "red";
ctx2.fillRect (10, 10, 200, 100);

ctx2.strokeStyle = "rgba(0,0,0,1)";
ctx2.lineWidth = 10;
ctx2.globalCompositeOperation='destination-in';
ctx2.strokeRect (10, 10, 200, 100);

编辑：我添加了一个 jsFiddle 示例，它显示了我期望/想要的内容，并且低于我得到的实际结果：

http://jsfiddle.net/nLGct/1

Answer 1

destination-in 合成的结果总是：

• 您原来的红色填充矩形中的一些/没有一个会存活下来。
• 你的新黑色中风将永远无法生存。

具体来说：

• 目的地（红色矩形）仅在与源（黑色笔划）重叠的地方存在。
• 所有非重叠区域均设为透明。

为什么会得到结果：

在画布中，笔划总是一半在其路径之内，一半在其路径之外。

因此，黑色描边的 inside-half 与原来的红色填充重叠。

因此，在destination-in 中幸存下来的是原始红色填充与黑色笔划内部重叠的部分。

如果您的黑色笔划为 10 像素宽，则内部 5 个像素与红色填充的矩形重叠，这些红色像素将继续存在。