情况基本上是用基本的线性渐变绘制几个移动的原始形状,以便它们重叠在透明的空白 Canvas 上。当它们重叠时,Alpha channel 值会发生变化(即出血)。
最后阶段是对每个单独像素的 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 的解决方案,但似乎没有任何方法让它工作,有什么想法吗?
最佳答案
没有其他方法可以将 alpha 值调整为 0 || 255.
合成可以让源像素或目标像素保留下来,但不会像您所描述的那样捕捉 Alpha。
关于javascript - 尝试在没有 get/putImageData 的情况下操作 Canvas 上的 alpha?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28429959/