15.2.7 阴影

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

• shadowColor：用CSS 颜色格式表示的阴影颜色，默认为黑色。
• shadowOffsetX：形状或路径x 轴方向的阴影偏移量，默认为0。
• shadowOffsetY：形状或路径y 轴方向的阴影偏移量，默认为0。
• shadowBlur：模糊的像素数，默认0，即不模糊。

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

var context = drawing.getContext("2d");
//设置阴影
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 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);

运行一下

① 请读者注意，虽然本章至今一直在讨论2D 绘图上下文，但toDataURL()是Canvas 对象的方法，不是上下文对象的方法。

两个矩形的阴影样式相同，结果如图15-10 所示。

不同浏览器对阴影的支持有一些差异。IE9、Firefox 4 和Opera 11 的行为最为规范，其他浏览器多多少少会有一些奇怪的现象，甚至根本不支持阴影。 Chrome（直至第10 版）不能正确地为描边的形状应用实心阴影。Chrome 和Safari（直至第5 版）在为带透明像素的图像应用阴影时也会有问题：不透明部分的下方本来是该有阴影的，但此时则一概不见了。Safari 也不能给渐变图形应用阴影，其他浏览器都可以。