我想在画布上绘制不透明度为0.2的两个对象。
两项都部分重叠。如果它们重叠，则不透明度为0.4，而不重叠的部分为0.2。即画布100w，100h。
https://jsbin.com/wicigarinu/edit?js，输出
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个以上填充的坐标上，也要保持最初设置的不透明度？
您可以在具有完全不透明性的辅助画布上进行绘制，然后复制到alpha <1的真实画布上。
这是一个基本的例子：
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);<canvas id="canvas"></canvas>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句