html5 Canvas中的自定义globalCompositeOperation

Question

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

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

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

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

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，但是我对如何将它们组合在一起感到有些困惑。

Answer 1

答案大多是不。

有没有办法来定义自己的globalCompositeOperation与Canvas2D。

2种解决方案

1. 使用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以及渐变等）来构建形状。

2. 完全切换到WebGL

   这里的问题是您将无法访问2D API的所有功能，因此要重现所有这些功能需要做很多工作。

   另一方面，如果仅使用有限的一组，则可能不会做太多工作。 例如，如果仅使用drawImage ， fillRect ， clear ，还可能使用moveTo和lineTo ， fill和stroke那么在WebGL中复制起来将相对容易。 如果您使用诸如遮罩，贝塞尔曲线，渐变或图案之类的许多功能，那么它将开始变得越来越有用。

首先， 这里是一个教程，介绍某种合成或图像处理 ，这是WebGL中globalCompositeOperation的基本技术。 上面的两个解决方案都需要这种基本类型的解决方案，以便在每个shape之后合成结果。