如何使用globalAlpha＆lt;在画布上绘制多个元素1没有alpha堆叠？

Question

我想在画布上绘制两个不透明度为0.2的对象。

两个项目部分重叠。在它们重叠的地方，不透明度将为0.4，而非重叠部分为0.2。 即画布100w，100h。

https://jsbin.com/wicigarinu/edit?js,output

ctx.globalAlpha = 0.2;
ctx.beginPath();
ctx.arc(50, 50, 25, 0, 2*Math.PI, false);
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.arc(65, 65, 20, 0, 2*Math.PI, false);
ctx.fill();
ctx.closePath();

我如何能够在相同的位置绘制，但保持原始设置的不透明度，即使在多于1次填充的坐标上也会如此？

Answer 1

您可以在具有完全不透明度的辅助画布上绘制，然后使用alpha＆lt;复制到真实画布。 1。

这是一个基本的例子：

＆＃13;

＆＃13;

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

//create helper canvas
const hCanvas = document.createElement('canvas');
const hCtx = hCanvas.getContext('2d');

//draw on helper canvas
hCtx.beginPath();
hCtx.arc(50, 50, 25, 0, 2*Math.PI, false);
hCtx.fill();
hCtx.closePath();

hCtx.beginPath();
hCtx.arc(65, 65, 20, 0, 2*Math.PI, false);
hCtx.fill();
hCtx.closePath();

//copy to real canvas with alpha < 1
ctx.globalAlpha = 0.2;
ctx.drawImage(hCanvas, 0, 0);

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

＆＃13;

＆＃13;