Html5 canvas html5画布中的自定义GlobalComposite操作

我在这里查看所有不同类型的全球合成业务：

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

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

if the existing canvas color alpha is 0.0, 
    then draw the new shape's color and set alpha to 0.1
if the existing canvas color is the same as the new shape's color
    then increase the alpha, by 0.1
if the existing canvas color is different from the the new shape's color
    then decrease the alpha by 0.1

---

我想得对吗？我觉得我应该以某种方式使用WebGLRenderingContext，但我对它如何结合在一起有点不确定。

答案基本上是否定的

无法使用Canvas2D定义您自己的

globalCompositeOperation

我脑子里有两个解决方案

使用2张画布，一张2d画布和一张WebGL画布

for each shape
   clear the 2d canvas
   draw the shape into the 2d canvas
   upload the canvas to a webgl texture
   composite that texture with the previous results using a custom shader.

此解决方案的问题是速度会很慢，因为将画布上载到纹理是一个相对缓慢的操作。但是，这意味着您可以使用所有画布功能，如

stroke

和

arc

和渐变等来构建它的形状

完全切换到WebGL

这里的问题是您无法访问2D API的所有功能，而复制所有这些功能需要大量的工作

另一方面，如果您只使用有限的一组，那么可能不会有太多的工作。例如，如果您只使用

drawImage

、

fillRect

、

clear

，或者

moveTo

和

lineTo

、

fill

和

stroke

，则在WebGL中复制相对容易。若你们正在使用很多特性，比如遮罩、贝塞尔曲线、渐变或图案，那个么它将开始变得更加复杂

---

作为启动程序，这是WebGL中

全局复合操作的基本技术。上述两种解决方案都需要这种基本类型的解决方案来合成每个
形状之后的结果
简短回答：不，你不能（或者没有太多工作）。你应该在网上搜索，有各种各样的项目可以使用webgl进行图像处理，你可以根据需要轻松修改。别忘了FF和Chrome现在都提供了很好的webgl调试工具。你可以为webgl重构代码，并从着色器中获益。但不要尝试扩展CanvasRenderingContext2D——不需要任何修改但您可以使用现有画布和另一个内存画布轻松创建自己的自定义图像过滤器功能。内存画布将保存新图形。然后在两个画布上
getImageData
，并根据自定义混合操作比较+操纵+替换现有画布上的每个像素。注意：这是由于使用getImageData进行合成无法卸载到gpu，因此资源和cpu消耗相当大。“复制[all context2D]功能需要大量工作”：是的，但使用这样的API（或具有足够的O.P.功能）仍然是可能的。我知道pixi.js，也许其他人也这么做。pixi不复制canvas API。它基本上只提供一个函数，
drawImage
，在它上面创建一个场景图。这是我上面的观点，如果你只使用canvas 2d API的一些基本功能，那么它就不难重现。我是这样做的我不知道有任何JS库可以在WebGL中复制canvas 2d api。如果你知道一些，请在下面发布。我知道的唯一一个JS库是，它已经被废弃了5年，并且丢失了很多功能。也许你在谈论Pixi的第一个版本。现在它有线条、贝塞尔、多边形……也许不是你想要的，但还有很多而不是图像。抱歉，我不知道还有其他选择。哦，太好了！我没有注意。谢谢@gman给出的很棒的答案。我刚刚将此标记为答案。你对这两个选项的解释非常有用。事实上，我使用了相当多的绘图api，包括贝塞尔曲线，所以我实际上一直在使用双画布方法，你知道吗建议作为第一个解决方案（成功有限，因为我是webgl的新手，还没有解决所有的bug）。