问题标签 [globalcompositeoperation]

我正在尝试在 javascript 中进行文本屏蔽。

以下是我的代码：-

但它不起作用。请帮我解决这个问题。

我已经把这个来自 MDN 的演示，https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html放到了一个 jsFiddle 中，并使颜色 50% 透明。 http://jsfiddle.net/eGAvb/

现在，根据 Apple 的说法，source-in应该“在源图像和目标图像都不透明的地方显示源图像。在源图像和目标图像都是半透明的地方显示混合。在源图像和目标图像都是透明的地方显示透明度。”

因此，当您查看它的显示方式时，您会发现问题。它是一种非常浅的粉红色，根本不是紫色。请有人能解释一下为什么广场上的蓝色都没有融合到这里吗？为什么它实际上变轻了？

补充：我刚刚注意到，一个更引人注目的明显例子。当根据官方规范：“源图像和目标图像的异或”时，xor 明显显示紫色，它应该什么都不显示！它没有提到不透明度应该影响这些规则。

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

有问题的代码 -

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

我有每个矩形，他们尊重他们的填充样式。问题是当我启用掩码时，它们不再可见。

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

这里有一些小提琴 -

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

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

http://jsfiddle.net/ENtXs/2/ - 添加 beginPath() 和 fill() 元素尊重填充样式。（没有掩饰）

http://jsfiddle.net/ENtXs/3/ - 添加掩码（不再显示）

http://jsfiddle.net/ENtXs/4/ - 只有一个与#3 代码相同的矩形才能正常工作。

使用 KineticJS 4.6.0在这个问题上回答了这个问题，提供了这个小提琴

但是...知道如何在最新版本的 kineticjs 上执行此操作吗？

我用 kineticjs 4.7.2 尝试了同样的小提琴：http: //jsfiddle.net/qNtSg/ 我只是用新的 API 改变了 drawFunc

合成不起作用

我正在设计一个简单的应用程序，我需要使用多个globalCompositeOperation，因此我需要使用多个隐藏项，然后将它们合并以获得最终结果。

其中一个画布项目用于drawImage()，然后将其用作 alpha 蒙版。

我假设在第二个画布上，如果我用来绘制第一个画布，它会完全复制它，所以我可以在它上面添加第二个东西。它只复制fillRect()并忽略drawImage()函数......

知道如何将第一个画布的全部内容转发到第二个吗？我需要蒙面部分移动到第二个画布。

被困了几个小时，需要你的帮助。尝试使用toDataUrl("image/png")然后将其输出到第二个画布，但得到相同的结果:(

简化版下：http: //jsfiddle.net/EbVmm/17/

谢谢

到目前为止，我得到了这个：http: //jsfiddle.net/Lt7VN/

但是它会剪切/剪切红色和黑色的矩形，而我希望它只剪切黑色的矩形，我该怎么做呢？

尝试在没有不透明度 1 的情况下在画布上徒手绘制，但结果如下：http: //i.imgur.com/ONhSlhV.png

将 globalCompositeOperation 设置为复制可以解决它，但是在 Firefox/Opera 中，复制会在绘制之前清除整个画布，这与它在 Chrome 中的做法不同。我知道另一种解决方案是在每次绘制时应用笔画之前将所有线条重新绘制为一条线，但是为了使不透明度起作用，这对性能造成了很大的影响。

我想做这个动画 - 海平面上升，吞没了一座有坑的小山。当水退去时，其中一些会留在口袋里，当水位上升时，它会再次变成一。这个动画无限期地继续。现在我尝试使用两种方法来做到这一点，

1) 用海水中的水流抽清池中的水。ctx.bezierCurveTo(x1,y1,x2,y2,end_x,end_y); 我随着水流改变了第一个和第二个控制点，使底座从小平面变为球形，反之亦然。但是并不光滑，而且第二个坑有不规则的底部，所以不可能。

2）我在需要的口袋里装满了水，并设置了不透明度，这样口袋里的水在被淹没时会与海水混合。同样，这种方法并没有给出平滑的外观。

它应该是这样的：

基本图像是画布的背景，我只需要控制水流。

请建议该怎么做。

我正在努力实现以下目标：

在画布上绘制了许多同心圆（或环）。每个圆圈都有一个“洞”，因此在其后面绘制的较小圆圈是部分可见的。每一帧（我们使用 window.requestAnimationFrame 来渲染）每个圆/形状/环的半径都会略微增加。

此处的图像中描绘了具有两个环的场景。

编码：

1. 这里到底有什么问题？我在绘制圆圈之前调用 clearRect 。请参阅“我实际得到的”图像。这是在多个帧上绘制 SINGLE RING 的结果。我不应该得到任何与中间有一个空心正方形的黑色圆圈不同的东西。（请注意，半径每帧都在增加。）

2. 我确实意识到切换 globalCompositeOperation 可能不足以达到我想要的效果。如何在画布上绘制的对象中绘制一个“洞”而不擦除我要修改的对象下方“洞”中的所有内容？

这是我用作 globalCompositeOperation 值参考的教程。

我正在使用 Firefox 28.0。

我基本上想把一个画布放在另一个上面，并定义它们的内容混合的方式。

我有一个带有黑色字符的白色画布，我想用一个透明的蓝色矩形突出显示它的一部分，而不会让背景中的黑色字符变成深蓝色。事实上，如果我合并两个画布并将 globalCompositeOperation 设置为“乘”而不是默认值，同时保持两个画布分开和重叠，我需要我得到的方面。

这是我所拥有的：

这就是我想要的：

我知道如果我将两个画布合并为一个，globalCompositeOperation 将允许我这样做。但我宁愿保留两个画布：我的背景画布由 lib 显示。我仍然可以绘制它，但这会使事情复杂化很多：

• 我会太依赖他们的逻辑，必须调整我和他们的逻辑才能使其工作，
• 性能至关重要，此解决方案意味着以 24 fps 进行更多绘图，
• 每次更新库时我都会挣扎...

总而言之，避免干扰 lib 似乎更好。有没有办法选择重叠画布的行为方式？

提前致谢！

编辑：我们还考虑将背景画布的白色部分转换为透明部分，并在下面添加我们的高光画布，但这也很复杂，如果不是不可能的话。