Question

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

我错过了解某事吗？这是实际使用的代码：

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

目的地合并的结果将始终为：

原始红色矩形中的一些/没有一个会存活。
你的新黑色中风都不会存活下来。

具体做法是：

目的地（红色矩形）只有在与来源重叠的地方（黑色笔画）才能存活。
所有非重叠区域都是透明的。

为什么你会得到你的结果：

在画布中，笔划总是在其内部的一半内部和一半外部。

因此，黑色笔触的内半部分与原始红色笔划重叠。

所以幸存目的地是原始红色填充的一部分，它与黑色笔划的内部重叠。

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

画布合成和剪裁效果

1 个答案: