使用畫布可以在半透明形狀上創建發光效果嗎？

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

然後沒有陰影，畫出你的形狀是正常的。