canvas - 使用画布可以在半透明形状上创建发光效果吗？

Question

我有一个半透明的形状：

ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.beginPath();  
ctx.moveTo(0, 150);  
ctx.lineTo(300, 0);  
ctx.lineTo(300, 450);
ctx.lineTo(50, 500);
ctx.closePath();
ctx.fill();

我想添加一点阴影，但我希望它只出现在形状之外，我想更多的是发光而不是阴影。作为我的尝试，有没有办法在画布中做到这一点：

ctx.shadowBlur    = 5;
ctx.shadowColor   = 'rgba(0, 0, 0, 0.25)';

看起来很普通，因为通过半透明的形状可以看到暗影。

谢谢！

Answer 1

我认为最简单的方法是创建一个剪切区域，包括形状之外的所有内容，然后在那里绘制阴影。

这里有创建倒置剪辑区域的描述：forums.whatwg.org。

基本上，对你来说，步骤是：

ctx.save();  // store initial clip region

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, canvas.width);
ctx.lineTo(canvas.height, canvas.width);
ctx.lineTo(canvas.height, 0);
ctx.lineTo(0, 0);
// {subpath of your shape here}
ctx.clip()

然后启用阴影并绘制您的形状。

恢复初始剪辑区域：

ctx.restore()

然后没有阴影，像往常一样画出你的形状。