HTML5 Canvas 阴影

HTML5 Canvas shadows可以向在HTML5画布上绘制的形状自动添加阴影,shadowOffsetX 与 shadowOffsetY设置要绘制阴影的距离绘制形状的距离。

在线示例

可以向在HTML5画布上绘制的形状自动添加阴影。这里有一些示例:

阴影是通过以下四个2D Context属性控制的:

1. shadowOffsetX

2. shadowOffsetY

3. shadowBlur

4. 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>