[英]How to erase a stroke in canvas with globalCompositeOperation = 'destination-out'?
[英]html5 canvas - how to use 'destination-out' to clear out the most recently drawn shape only?
假设我画了一个绿色矩形,然后在它上面画了一个蓝色矩形。 我想在蓝色矩形中画一个圆孔,以便通过孔可以看到下面的绿色矩形。
我试过使用destination-out
但它清除了下面的所有形状:
const ctx = document.querySelector("#canvas").getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(0, 0, 50, 100); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 50, 50); ctx.globalCompositeOperation = "destination-out"; ctx.beginPath(); ctx.arc(50 / 2 - 10 / 2, 50 / 2, 10, 0, Math.PI * 2); ctx.fill(); ctx.globalCompositeOperation = "source-over";
<canvas id="canvas" width="500" height="200" style="background: black" ></canvas>
创建第二个 canvas,将蓝色矩形添加到其中,切出圆形,然后将其合并到第一个 canvas 中:
const ctx = document.querySelector("#canvas").getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(0, 0, 50, 100); const canvasTemp = document.createElement("canvas"); const ctxTemp = canvasTemp.getContext("2d"); ctxTemp.fillStyle = "blue"; ctxTemp.fillRect(0, 0, 50, 50); ctxTemp.globalCompositeOperation = "destination-out"; ctxTemp.beginPath(); ctxTemp.arc(50 / 2 - 10 / 2, 50 / 2, 10, 0, Math.PI * 2); ctxTemp.fill(); ctxTemp.globalCompositeOperation = "source-over"; ctx.drawImage(canvasTemp, 0, 0);
<canvas id="canvas" width="500" height="200" style="background: black" ></canvas>
要在当前内容后面绘制,请使用destination-over
复合模式:
const ctx = document.querySelector("#canvas").getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 50, 50); ctx.globalCompositeOperation = "destination-out"; ctx.beginPath(); ctx.arc(50 / 2 - 10 / 2, 50 / 2, 10, 0, Math.PI * 2); ctx.fill(); ctx.globalCompositeOperation = "destination-over"; ctx.fillStyle = "green"; ctx.fillRect(0, 0, 50, 100);
<canvas id="canvas" width="500" height="200" style="background: black" ></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.