在HTML畫布上獲取用於填充和描邊的單個陰影

Question

我必須在畫布上繪製描邊填充。爲此，我必須分別調用ctx.fill和ctx.stroke，由於這個原因，中風的陰影會出現在我想避免的填充的頂部。 請問有人可以告訴我們是否有辦法避免這種情況？

這是我的代碼。

ctx1.fillStyle = "blue"; 
ctx1.strokeStyle = "black"; 
ctx1.shadowColor = "rgba(0,255,0, 1)"; 
ctx1.shadowOffsetX = 50; 
ctx1.shadowOffsetY = 50; 
ctx1.lineWidth="20"; 
ctx.beginPath(); 
ctx.moveTo(300, 100); 
ctx.lineTo(400, 100); 
ctx.lineTo(400, 200); 
ctx.lineTo(300, 200); 
ctx.closePath(); 

ctx1.fill(); 
ctx1.stroke(); 

http://jsfiddle.net/abWYZ/3/

在此先感謝 拉胡爾

Answer 1

每次執行上下文平局動作的影子也被拉。畫布的工作方式是將繪製的每一件東西放在之前的東西之上。所以發生了什麼是填充被執行，使它成爲一個影子，然後繪製筆畫，這會在所有先前繪製的對象上繪製一個陰影。

以下是一種可能的解決方案。

Live Demo

// Grab the Canvas and Drawing Context 
var canvas = document.getElementById('c'); 
var ctx = canvas.getContext('2d'); 

ctx.save(); 
ctx.fillStyle = "blue"; 
ctx.strokeStyle = "black"; 

ctx.lineWidth="20"; 
ctx.beginPath(); 
ctx.moveTo(300, 100); 
ctx.lineTo(400, 100); 
ctx.lineTo(400, 200); 
ctx.lineTo(300, 200); 
ctx.closePath(); 

ctx.shadowColor = "rgba(0,255,0, 1)"; 
ctx.shadowOffsetX = 50; 
ctx.shadowOffsetY = 50; 

ctx.stroke(); 
ctx.fill(); 
// clear the shadow 
ctx.shadowColor = 0; 
ctx.shadowOffsetX = 0; 
ctx.shadowOffsetY = 0; 

// restroke w/o the shadow 
ctx.stroke(); 

如果你使用的方法是這樣，我建議做一個被稱爲那些允許當陰影被吸引你控制線toggleShadow什麼功能。