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);
两个矩形的阴影形式相同,结果如下:
不同浏览器对阴影的支持有一些差异。