在HTML5中，使用canvas元素可以給圖形添加陰影效果。添加陰影效果時
，只需利用圖形上下文對象的幾個關於陰影繪製的屬性就可以了，如下所示：
shadowOffsetX ——陰影的橫向位移量
shadowOffsetY——陰影的縱向位移量
shadowBlur ——陰影的模糊範圍
shadowColor ——陰影的顏色
shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距
離，它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸，正值則表
示會往下或右延伸，他們默認都是 0。
shadowBlur 用於設定陰影的模糊程度，它表示圖形陰影邊緣的模糊範圍。
如果不希望陰影的邊緣太清晰，需要將陰影的邊緣模糊化時可以使用該屬性。
設定該屬性值時必須要設定爲比0大的數字，否則將被忽略。一般設定在0至
10之間，開發時可以根據情況調整這個數值，以達到滿意效果。
shadowColor 用於設定陰影效果的延伸，值可以是標準的 CSS 顏色值，
默認是全透明的黑色。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>爲文字繪製陰影效果</title>
<script >
function draw(id) {
var context = document.getElementById('canvas').getContext('2d');
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.shadowBlur = 2;
context.shadowColor = "rgba(0, 0, 0, 0.5)";
context.font = "30px Times New Roman";
context.fillStyle = "red";
context.fillText("珊瑚貝 shanhubei.com", 5, 30);
}
</script>
</head>
<body οnlοad="draw('canvas');">
<canvas id="canvas" width="400" height="300" />
</body>
</html>
