本文介紹Canvas Shadow API ， 為文本添加模糊陰影效果. 雖然之前已對 canvas 陰影效果應用 有介紹, 這裡主要介紹對文本的陰影效果.
陰影效果的使用也要把握好"度".
看一個例子
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>文本阴影示例</title>
<canvas id="trails" style="border: 1px solid;" width="400" height="300"> </canvas>
<script>
drawTrails();
function drawTrails() {
var canvas = document.getElementById('trails');
var context = canvas.getContext('2d');
context.save();
context.font = "60px impact";
context.fillStyle = '#996600'
context.textAlign = 'center';
// 设置文字阴影的颜色为黑色，透明度为20%
context.shadowColor = 'rgba(0, 0, 0, 0.2)';
// 将阴影向右移动15px, 向上移动10px
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;
// 轻微模糊阴影
context.shadowBlur = 2;
context.fillText('Happy Trails!', 200, 60, 400);
context.restore();
}
</script>
</html>運行效果圖
，而只有
，只有在它之前的陰影變換產生的陰影(樹影)
保持同步.
為了一致起見， 在canvas 上繪製陰影時，應該盡量只用一種方法
以上就是HTML5之9 __Canvas 的Shadow API 的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！
