HTML5 Canvas shadows可以向在HTML5画布上绘制的形状自动添加阴影,shadowOffsetX 与 shadowOffsetY设置要绘制阴影的距离绘制形状的距离。
可以向在HTML5画布上绘制的形状自动添加阴影。这里有一些示例:
阴影是通过以下四个2D Context属性控制的:
shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor
shadowOffsetX 与 shadowOffsetY设置要绘制阴影的距离绘制形状的距离。正值表示阴影绘制在形状的（x）右侧和（y）下方。负值表示阴影绘制在形状的（x）左侧和（y）上方。
shadowBlur设置阴影应模糊的程度。该数字越高，形状越模糊。数字越低，阴影变得越锐利。值为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>测试看看