添加 transparency/alpha 到 canvas 覆盖现有颜色

Question

我正在尝试用 canvas 创建一个月亮形状。为此，我创建了两个圆圈：一个用我的颜色填充，另一个用 globalCompositionOperation: "destination-out".

减去

const moonCanvas = createCanvas(WIDTH, HEIGHT);
const moonCtx = canvas.getContext("2d");

moonCtx.beginPath();
moonCtx.arc(WIDTH / 2, HEIGHT / 2, HEIGHT / 4, 0, 2 * Math.PI);
moonCtx.fill();

moonCtx.globalCompositeOperation = "destination-out";

moonCtx.beginPath();
moonCtx.arc(WIDTH / 2 + 30, HEIGHT / 2, HEIGHT / 4, 0, 2 * Math.PI);
moonCtx.fill();

这是一个 fiddle 的最小复制：https://jsfiddle.net/h2qbytzn/

现在的问题是此操作向 canvas 添加了“显式”透明度。每当我想将月亮添加到另一个 canvas 时，它也会包括透明部分，从而覆盖那里已经存在的部分 canvas。

有没有办法在忽略透明部分的情况下导入 canvas 内容？

Answer 1

现在对我有用的是创建第二个 canvas，在那里绘制我的对象并将它们合并到原始 canvas 中 drawImage:

const c2 = createCanvas(WIDTH, HEIGHT);
const ctx2 = c2.getContext("2d");

ctx2.fillStyle = "yellow";

ctx2.beginPath();
ctx2.arc(WIDTH / 2, HEIGHT / 2, HEIGHT / 4, 0, 2 * Math.PI);
ctx2.fill();

ctx2.globalCompositeOperation = "destination-out";

ctx2.beginPath();
ctx2.arc(WIDTH / 2 + 30, HEIGHT / 2 - 15, HEIGHT / 4, 0, 2 * Math.PI);
ctx2.fill();

ctx.drawImage(c2, 0, 0); // merging the canvas, not its context!

添加 transparency/alpha 到 canvas 覆盖现有颜色

Adding transparency/alpha to canvas overwriting existing color

javascript

node.js

canvas

vector