如何用html绘制阴影图形,HTML5 给图形绘制阴影

在 HTML5 中，我们除了上一节讲过的可以对图形设置平移、旋转、缩放，还可以给图形添加阴影效果。添加阴影的时候只需要利用图形上下文对象的几个关于阴影绘制的属性就可以实现啦。

图形阴影绘制的属性

属性

描述shadowOffsetX

阴影的横向位移量

shadowOffsetY

阴影的纵向位移量

shadowBlur

阴影的模糊范围

shadowColor

阴影的颜色

shadowOffsetX 属性和 shadowOffsetY 属性分别用于设置阴影在 X 轴和 Y 轴的延伸距离，属性值为正值表示向下或向右延伸，负值表示向上或向左延伸。

shadowBlur 属性用于设置阴影的模糊度，当我们不希望图形的阴影太清晰时，可以使用这个属性。属性值为必须为正值，否则无效哟，一般设定在 0到10 之间。

shadowColor 属性值用于设置阴影的颜色，属性值可以为任意标准的 CSS 颜色值，默认颜色为黑色。

给图形绘制阴影

例如给一个粉色的矩形绘制阴影。

示例：

绘制向右偏移 10 像素的阴影：

var can = document.getElementById("mycanvas");

var ctx = can.getContext("2d");

ctx.shadowOffsetX = 10;

ctx.shadowBlur = 10;

ctx.shadowColor="#000";

ctx.fillStyle