html5 Canvas shadows可以向在html5畫布上繪制的形狀自動添加陰影,shadowOffsetX 與 shadowOffsetY設置要繪制陰影的距離繪制形狀的距離。

在線示例

可以向在HTML5畫布上繪制的形狀自動添加陰影。這里有一些示例:

陰影是通過以下四個2D Context屬性控制的:

shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor

shadowOffsetX 與 shadowOffsetY設置要繪制陰影的距離繪制形狀的距離。正值表示陰影繪制在形狀的（x）右側(cè)和（y）下方。負值表示陰影繪制在形狀的（x）左側(cè)和（y）上方。
shadowBlur設置陰影應模糊的程度。該數(shù)字越高，形狀越模糊。數(shù)字越低，陰影變得越銳利。值為0表示陰影完全不模糊。
shadowColor 只需設置陰影的顏色。
這是上面示例的代碼:

示例

<canvas id="ex1" width="500" height="200" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
<script>var canvas  = document.getElementById("ex1");var context = canvas.getContext("2d");
 
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur    = 4;
context.shadowColor   = "#666666";//或使用rgb（紅色，綠色，藍色）
 
context.fillStyle = "#000000";
context.fillRect(10,10, 50, 50);
 
context.fillStyle = "#000066";
context.font = "30px Arial";
context.fillText("HTML5 Canvas Shadow", 10,120);
</script>