HTML5 Canvas 阴影

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>