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

在线示例

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

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

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>