javascript - 绘制透明形状时覆盖在 Canvas 上绘制的内容

Question

我看不到这已经发布了，所以就在这里。

假设我在 Canvas 上画了 2 个正方形。

var c = document.getElementById('test'), ctx = c.getContext('2d');
ctx.fillStyle = "rgba(0,0,255,0.5)";
ctx.beginPath();
ctx.moveTo(25, 0);
ctx.lineTo(50, 50);
ctx.lineTo(0, 50);
ctx.lineTo(25, 0);
ctx.fill();
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.beginPath();
ctx.moveTo(50, 0);
ctx.lineTo(75, 50);
ctx.lineTo(25, 50);
ctx.lineTo(50, 0);
ctx.fill();

这会产生这个图像:

如果我将 globalAlpha 更改为 0.5，我会得到以下结果:

但是，我想制作这个:

就像这样，所有像素都是透明的，其下方的任何图像都会显示，但红色三 Angular 形创建的像素将覆盖绘制它的现有蓝色三 Angular 形。

并且 ctx.globalComposisteOperation 在这种情况下似乎没有帮助，因为它还考虑了透明度以及我想保留两个正方形的事实。

有没有办法用当前的方法来做到这一点？

Answer 1

在绘制之前使用合成清除红色三 Angular 形。

使用合成比剪辑稍好一些，因为您不必清除剪辑。清除剪辑需要保存整个上下文状态，然后恢复该上下文状态——涉及许多属性。合成只需要来回更改 1 个属性。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// fill the blue rect
ctx.fillStyle = "rgba(0,0,255,0.5)";
ctx.beginPath();
ctx.moveTo(25, 0);
ctx.lineTo(50, 50);
ctx.lineTo(0, 50);
ctx.lineTo(25, 0);
ctx.fill();

// define the red rect path
ctx.beginPath();
ctx.moveTo(50, 0);
ctx.lineTo(75, 50);
ctx.lineTo(25, 50);
ctx.lineTo(50, 0);

// clear the red rect path using compositing
ctx.globalCompositeOperation='destination-out';
ctx.fillStyle='black';
ctx.fill();
ctx.globalCompositeOperation='source-over';

// fill the red rect
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.fill();

body{ background-color:white; }
#canvas{border:1px solid red; }

<canvas id="canvas" width=512 height=512></canvas>