使用Canvas绘图（5）--阴影

2D上下文会根据以下几个属性的值，自动为形状或路径绘制出阴影。

shadowColor:用CSS颜色格式表示的阴影颜色，默认为黑色。

shadowOffsetX:形状或路径x轴方向的阴影偏移量，默认为0.

shadowOffsetY:形状或路径y轴方向的阴影偏移量，默认为0.

shadowBlur:模糊的像素数，默认为0，即不模糊。

这些属性都可以通过context对象来修改。只要在绘制前为它们设置适当的值，就能自动产生阴影。例如：

var context=drawing.getContext("2d");

//设置阴影

context.shadowOffsetX=5;

context.shadowOffsetY=5;

context.shadowBulr=4;

context.shadowColor="rgba(0,0,0,0.5)";

//绘制红色矩形

context.fillStyle="#ff0000";

context.fillRect(10,10,50,50);

//绘制蓝色矩形

context.fillStyle="rgba(0,0,255,1)";

context.fillRect(30,30,50,50);

两个矩形的阴影形式相同，结果如下：

 

不同浏览器对阴影的支持有一些差异。