如何在没有 alpha 堆叠的情况下在 globalAlpha < 1 的画布上绘制多个元素？答案

【问题标题】：How to draw more than one element on a canvas with globalAlpha < 1 without alpha stacking?如何在没有 alpha 堆叠的情况下在 globalAlpha < 1 的画布上绘制多个元素？
【发布时间】：2017-01-28 17:20:53
【问题描述】：

我想在画布上绘制两个不透明度为 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 个填充发生的坐标上？

【问题讨论】：

在画布上没有“本机”方法可以做到这一点。也许一些框架会实现这一点，但这需要谷歌搜索。如果没有第三方库，您需要以没有重叠区域的方式绘制复合图形。
stackoverflow.com/a/17623263/1693593

标签： javascript canvas

【解决方案1】：

您可以在完全不透明的辅助画布上绘制，然后复制到具有 alpha

这是一个基本的例子：

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);

&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

【讨论】：