状況は基本的に、基本的な線形グラデーションでいくつかの動くプリミティブ形状を描画して、透明な空白のキャンバスに重ねます。それらがアルファ チャネル値の変化と重なる場所 (つまり、にじみます)。
最終段階では、個々のピクセルごとにアルファを丸めているため、近い方に応じて 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 を使用するソリューションを考え出そうとしていましたが、それを機能させる方法がないように思えますが、アイデアはありますか?