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

【问题标题】：Trying to manipulate alpha on a canvas without get/putImageData?试图在没有 get/putImageData 的情况下在画布上操作 alpha？
【发布时间】：2015-02-11 00:40:16
【问题描述】：

情况基本上是用基本的线性渐变绘制几个移动的原始形状，以便它们在透明的空白画布上重叠。它们与 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 的解决方案，但似乎无法让它工作，有什么想法吗？

【问题讨论】：

标签： javascript canvas html5-canvas getimagedata putimagedata

【解决方案1】：

没有其他方法可以将 alpha 捕捉到 0 || 255.

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

【讨论】：

我就是这么想的——但我希望我能得到一些接近的东西——一点边缘半透明并不是一件坏事：-/