Question

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

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

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

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

//Global variable.-
MyObject:= TMyObject.Create();
MyObject.MyData:= 'Salam world';  
//Local variable.-
myObj:= MyObject;
MyObject.Free();
...
ShowMessage(myObj.MyData); //Don't show the data.-

我是否正确地考虑过这个问题？我觉得我应该以某种方式使用WebGLRenderingContext，但我对它们如何组合起来有点不稳定。

Answer 1

答案基本上没有。

无法使用Canvas2D定义您自己的globalCompositeOperation。

我头顶的2个解决方案

使用2幅画布，2张画布和1张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中重现会相对容易。如果您使用了许多功能，如遮罩，贝塞尔曲线，渐变或图案，它开始变得更加有效。

作为启动器here's a tutorial that presents a certain kind of compositing or image processing，它是WebGL中globalCompositeOperation的基本技术。上述两种解决方案都需要这种基本类型的解决方案，以便在每个shape之后合成结果。

在html5 Canvas中自定义globalCompositeOperation

1 个答案: