2
我有一个由外部库写入的<canvas>元素。我希望将“后期制作”效果应用到此画布上：我想在最终显示每个像素之前映射功能(r,g,b,a) -> (r,g,b,a)。如何将像素着色器应用于画布元素？
我知道外部库写入从<canvas>元素获得的2D上下文。我也知道我要求的转换是“像素着色器”或“片段着色器”。我知道我需要一个webgl上下文来应用这样一个着色器。 this answer告诉我一个画布不能同时有多个上下文，所以我不确定这种方法是否可行。
我考虑的另一种方法是将画布的输出捕获为流，然后将其写入新画布并应用我的转换。但是，this feature only exists in bleeding-edge Firefox。
是否可以将片段着色器应用于画布输出？如果是这样，怎么样？
你没有使用'captureStream（）'，'CanvasContext2D.drawImage（）'方法可以接受将其他画布作为imageSource。然后，您只需创建一个其他画布元素，并在其上绘制“drawImage（yourActualCanvas，0，0）”。如果绘制的画布没有被污染，您可以调用画布的getImageData（）来进行像素转换，或者您也可以在['globalCompositeOperation']中找到您的快乐（https://developer.mozilla.org/ en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation），它们的速度更快！ – Kaiido
以下是一个示例：http://jsfiddle.net/an0ajbfw/ – Kaiido