Canvas陰影繪製

陰影的繪製主要依賴以下四個屬性：

• shadowOffsetX：陰影x方向的偏移距離
• shadowOffsetY：陰影y方向的偏移距離
• shadowColor：陰影的顏色
• shadowBlur：陰影的模糊半徑

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 陰影的x偏移
ctx.shadowOffsetX = 10;
// 陰影的y偏移
ctx.shadowOffsetY = 10;
// 陰影顏色
ctx.shadowColor = 'rgba(0,0,0,0.5)';
// 陰影的模糊半徑
ctx.shadowBlur = 10;
ctx.fillStyle = 'rgba(255,0,0,0.5)'
ctx.fillRect(100, 100, 100, 100);

需要注意的是，陰影的偏移是以繪製圖形的左上角爲座標原點來計算的。

而且，設置的陰影相關屬性會對後面繪製的圖形產生影響。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 陰影的x偏移
ctx.shadowOffsetX = 10;
// 陰影的y偏移
ctx.shadowOffsetY = 10;
// 陰影顏色
ctx.shadowColor = 'rgba(0,0,0,0.5)';
// 陰影的模糊半徑
ctx.shadowBlur = 10;
ctx.fillStyle = 'rgba(255,0,0,0.5)'
ctx.fillRect(100, 100, 100, 100);
ctx.font = '50px sans-serif';
ctx.fillText('Hello Wolrd');