CanvasのglobalCompositeOperation

勉強 プログラミング javascript

前回のパーフェクトシャッフルは、表示を奇麗にする為にopacityを0.03にして透過を強くし、その副作用として色が薄くなってしまったのを強調する為にgetImageDataを使ってピクセル毎の色を調整していたわけだけども、MDCのサイトを見てると、Canvasのコンテキストに設定するオプションの値で簡単にできることがわかったのでメモ。

var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,450,450);
ctx.globalCompositeOperation = 'lighter'; // ← これ

前回より奇麗になったのではないかのぅ。


[参考]