问题标签 [globalcompositeoperation]

我正在尝试使用下面的代码片段在图像中填充颜色，以在图像的 canvas 上填充颜色。它成功地在画布中填充颜色。现在，我正在尝试使用此代码片段擦除用户触摸时填充的颜色，以擦除画布图像上的颜色。它的擦除颜色和在触摸位置设置透明区域。现在我想在用户触摸时用颜色重新填充该区域，但由于透明像素，它不允许我在该区域上着色。那么有没有办法用颜色重新填充像素或者有没有其他方法可以从画布图像中擦除颜色？任何回复将不胜感激。

在画布的图像上填充颜色的代码片段

用于擦除画布图像上的颜色的代码片段

我所要求的可能非常简单，但我在获得预期结果时遇到了很多麻烦。

我想要一个形状（在这个例子中它是正方形，但应该与其他形状如圆形等一起使用）在它离开另一个形状的边界时将其自身切断。

基本上，顶部图像是我想要的，底部是我目前拥有的：http: //imgur.com/a/oQkzG

我听说这可以通过 globalCompositeOperation 完成，但我正在寻找任何能够提供所需结果的解决方案。

这是当前代码，如果您不能使用 JSFiddle：

JSFiddle 链接

我想制作一个 HTMLselect列表，我可以使用它来选择globalCompositeOperation在混合两个canvas元素时应用哪种类型，如下所示：

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

我不想只是验证用户的浏览器是否支持某些混合模式，如此处所述。我想获得支持globalCompositeOperation类型的完整列表，以便在浏览器中选择混合模式。

我正在尝试在 Canvas 中创建“橡皮擦”效果，但使用 SVG 图像作为橡皮擦的自定义形状。

所以我可以将我的 SVG 图像绘制到画布上，并使用 globalCompositeOperation='destination-out' 来创建遮罩效果。

它在 IE、Safari 和 Chrome 中运行良好。但它在 Firefox 中完全失败。

我在这里查看所有不同类型的全局复合操作：

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

他们都没有做我想做的事。有没有办法定义自定义 globalCompositeOperation？如果我可以创建一个着色器，然后在每次使用 CanvasRenderingContext2D.draw 方法绘制某些东西时使用它，那将是完美的。

具体来说，在每个像素的基础上，我希望 CanvasRenderingContext2D.draw 方法使用以下（伪代码）操作：

我是否正确地考虑了这一点？我感觉到我应该以某种方式使用 WebGLRenderingContext，但我对它们如何组合在一起有点不稳定。

我创建了一个 HTML5 绘图应用程序，它具有允许用户选择要绘制的颜色、更改绘图工具的大小（半径）、撤消、重做和完全清除画布的基本功能。

我最近使用 globalCompositionProperty (destination-out) 添加了一个橡皮擦工具来擦除画布的选定区域。这部分工作正常，但是当我去撤消擦除时，整个画布都被清除了，重做功能不起作用。当我使用常规绘图工具（使用源代码）恢复绘图时，撤消/重做工作。我已经包含了应用程序中使用的一些功能的代码。每次关闭绘图工具时，我都会存储画布的快照。这被添加到用于撤消和恢复画布的数组中。

有人可以解释我在这里做错了什么吗？我不确定我是否了解 globalCompositeOperation 属性如何影响已保存的画布 DataURI。

更新：玩了一段时间后，我尝试了一些可以解决我的问题的方法。我不确定这是否是正确的做事方式，但我想我会向你展示我所做的一切。

我有一个在鼠标启动时触发的脱离功能。这是之前的功能：

我添加了一些代码，这允许用户使用橡皮擦工具并撤消/重做操作。我还不确定为什么会这样，所以如果有人有见识，我将不胜感激。

我从 W3S 尝试了下面的代码，他们说蓝色矩形是源，红色是目标，我需要知道他们是如何确定的，是订单还是其他？

我有一个非常简单的问题：是否可以仅将 globalCompositeOperation 用于有限数量的图像？

例如，我在画布上画了很多东西。最重要的是，完成无关的，我想对两个图像做一些操作（我只想显示结果，而不是两个图像）。怎么可能呢？

目前，执行此类操作会影响下面已经绘制的所有内容。

因此，我找到的一个解决方案是在另一个画布中执行操作，该画布显示在我的第一个主画布之上。但这看起来很糟糕。首先，它击中了表演。然后，感觉不直观。最后，我放松了对图层的控制：我的第二个画布中的任何内容都将始终位于第一个画布的顶部。

这看起来是一个非常简单的功能，我希望我只是不擅长谷歌搜索！

非常感谢！

我的目的是在圆形形状内绘制半圆形内部阴影，代表行星围绕恒星移动（这是我正在开展的教育计划的一部分）。

经过许多方法，这是几乎对我有用的方法：

1. 画一个圆形（行星），在它上面画一个包含实际阴影的大圆圈。

2. 使用组合选项“ctx.globalCompositeOperation='source-atop';” 要绘制更大的圆圈，它只会绘制与现有内容重叠的部分：

但问题是任何行星都会与任何阴影圈重叠，因此，如您所见，当行星与较大的阴影重叠时，它会完全变暗。

有没有办法让它绘制特定内容（形状）的重叠区域？

或者，您知道更好的方法吗？请记住，我必须以从行星到光源的特定角度绘制阴影。

提前致谢！

我对globalCompositeOperation有疑问。

我的目标是使蓝色元素仅显示在红色元素内部，并且根本不应该在红色矩形之外可见（一种溢出隐藏效果）。另外，红色和蓝色都必须具有变形能力（均可编辑）。

如您所见，如果我在画布中再添加一个元素（黄色元素），则蓝色元素在黄色和蓝色重叠的区域变得可见。

http://jsfiddle.net/redlive/q4bvu0tb/1/

强制性条件：

• 保留画布上的元素外观。
• 无剪辑（因为剪辑不允许同时添加背景颜色和图像）