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

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

然后没有阴影，画出你的形状是正常的。