3

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

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，但我对它们如何组合在一起有点不稳定。

4

1 回答 1

2

答案大多是否定的。

没有办法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或许moveToand lineTo,那么在 WebGL 中重现会相对容易。如果您正在使用许多功能，如遮罩、贝塞尔曲线、渐变或图案，它开始变得更加工作。fillstroke

作为初学者，这里的教程介绍了某种合成或图像处理globalCompositeOperation，这是WebGL中的基本技术。上述两种解决方案都需要这种基本类型的解决方案来组合每个shape.

于 2016-01-02T16:50:59.667 回答