1

状況は基本的に、基本的な線形グラデーションでいくつかの動くプリミティブ形状を描画して、透明な空白のキャンバスに重ねます。それらがアルファ チャネル値の変化と重なる場所 (つまり、にじみます)。

最終段階では、個々のピクセルごとにアルファを丸めているため、近い方に応じて 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 を使用するソリューションを考え出そうとしていましたが、それを機能させる方法がないように思えますが、アイデアはありますか?

4

1 に答える 1