试图在没有get / putImageData的情况下在画布上操纵alpha？

Question

情况基本上是绘制几个具有基本线性渐变的移动基本形状，因此它们在透明的空白画布上重叠。它们重叠的地方是α通道值的变化（即它们流血）。

最后阶段是为每个像素舍入alpha，所以它取决于它更接近的0或255.

使用imageData很容易做到 -

var ctxImage = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var ctxData = ctxImage.data;
for (var i = 0; i < ctxData.length; i += 4) {
    ctxData[i + 3] = ctxData[i + 3] > 128 ? 255 : 0;
    // or ctxData[i + 3] = Math.round(ctxData[i + 3] / 255) * 255;
}
ctx.putImageData(ctxImage, 0, 0);

因为getImageData在CPU时间上非常昂贵，所以我希望找到一个使用globalCompositeOperation的解决方案，但似乎无法以任何方式让它工作，任何想法？

Answer 1

没有替代方法将alpha捕捉到0 || 255。

合成可让源像素或目标像素存活，但不会像您描述的那样捕捉alpha。