説明

對canvas產生圖層混合的效果。
類似CSS的mix-blend-mode

範例

canvas#canvas(width="800", height="800")

html, body
 margin: 0
 padding: 0
 overflow: hidden

const ctx=canvas.getContext("2d");


ctx.fillStyle="#FFA500";
ctx.fillRect(400, 400, 100, 100);

//合成效果一覽
ctx.globalCompositeOperation="multiply";

ctx.fillStyle="#f7f4c8";
ctx.fillRect(450, 450, 100, 100);

Display
Display