标签: globalcompositeoperation

我正在尝试绘制多个矩形，然后使用 globalCompositeOperation 'source-in' 掩盖那些效果很好的矩形，但问题是当我填充我的矩形时，它们消失了......如果我只有一个 fill() 调用，它们都可以正确绘制但只尊重最后应用的填充样式。

有问题的代码 -

ctx.drawImage(self.glass.mask, 256, 375);
ctx.globalCompositeOperation = 'source-in';

ctx.rect(256, 635, 256, 75);
ctx.fillStyle = "#c65127";

ctx.rect(256, 605, 256, 25);
ctx.fillStyle = "#f5f4f0";

ctx.rect(256, 565, 256, 35);
ctx.fillStyle = "#c65127";

ctx.fill();

上面的代码工作正常。但如果我这样做，并取下面具——

ctx.beginPath();
ctx.rect(0, 256, 256, 75);
ctx.fillStyle = "#c65127";
ctx.fill();

ctx.beginPath();
ctx.rect(0, 226, 256, 25);
ctx.fillStyle = "#f5f4f0";
ctx.fill();

ctx.beginPath();
ctx.rect(0, 186, 256, 35);
ctx.fillStyle = "#222";
ctx.fill();

我有每个矩形，他们尊重他们的填充风格。问题是当我启用蒙版时，它们不再可见。

在 globalCompositeOperation 'source-in' 下可以拥有的元素数量是否有限制，或者我只是缺少一些简单的东西？

这里有一些小提琴 -

http://jsfiddle.net/ENtXs/ - 按预期工作但不尊重填充样式。

http://jsfiddle.net/ENtXs/1/ - 移除遮罩以显示所有元素

http://jsfiddle.net/ENtXs/2/ - 添加 …

我想创建一个HTML select列表,我可以选择globalCompositeOperation在混合两个canvas元素时应用哪种类型,如下所示:

<select name="blending-modes" id="blending-modes">
    <option value="source-over">source-over</option>
    <option value="source-in">source-in</option>
    <option value="source-out">source-out</option>
    ...
</select>

有没有办法以编程方式获取可用globalCompositeOperation类型列表作为Javascript对象或数组,因此它可以用于使用select数据填充元素,而不是手动填充它？这些信息是否存储在一些原生变量中？

我不想只是验证一些混合模式是否被用户的浏览器所支持,所讨论这里.我想获得支持globalCompositeOperation类型的完整列表,以便在浏览器中选择混合模式.