阴影
在canvas中进行绘制时，不管是文本、图形、还是图像，也不管是描边还是填充，都可以通过设置上下文对象的相关属性，来为它们设置阴影。这些属性及含义见表 4‑4：
| 属性 | 含义 |
|---|---|
| shadowColor | 阴影的颜色，其默认值为完全透明的黑色。因此，如果没有把该属性设置为不透明，则阴影是不可见的。该属性只能设置为一个表示颜色的字符串，不能使用渐变或图案。使用半透明的阴影可以产生很逼真的阴影效果，因为透过阴影还能看到背景 |
| shadowOffsetX | 阴影在X轴的偏移量，单位为像素。默认值为0，阴影位于图形正下方，阴影是不可见的。大于0向右偏移，小于0向左偏移。阴影偏移量越大，产生的阴影也越大，同时会感觉绘制的图形在画布是浮得也越高 |
| shadowOffsetY | 阴影在Y轴的偏移量，单位为像素。默认值为0，阴影位于图形正下方，阴影是不可见的。大于0向下偏移，小于0向上偏移。阴影偏移量越大，产生的阴影也越大，同时会感觉绘制的图形在画布是浮得也越高 |
| shadowBlur | 阴影的模糊值。是一个与像素无关的值，被用于高斯模糊方程中，以便对阴影进行模糊化处理。默认值为0，表示产生一个清晰的阴影。该值越大，表示阴影越模糊 |
根据canvas规范，只有在满足以下两个条件时，浏览器才会绘制阴影：1）指定了一个非全透明的shadowColor属性值；2）shadowOffsetX、shadowOffsetY、shadowBlur三个属性中，至少有一个属性的值不是0。
以下代码给黑色的文本增加灰色的阴影：
context.font = 'bold 35px Arial';context.textAlign = 'center';context.textBaseline = 'bottom';context.fillStyle = '#000';context.shadowOffsetX = 20;context.shadowOffsetY = -30;context.shadowColor = "#ccc";context.shadowBlur = 2;context.fillText("Hello Canvas", 0, 0);
上述代码中，阴影在X轴的偏移量和Y轴的偏移量都设置的比较大，故产生的阴影也比较远，文本在画布也浮得较高。运行结果如图 4‑24 所示：
图4-24 阴影效果
由于阴影的shadowOffsetX属性被设置为正值，而shadowOffsetY属性被设置为负值，故阴影在X轴向右偏移，在Y轴向上偏移。
说明：
shadowOffsetX和shadowOffsetY属性总是在默认坐标系空间中度量的，它不受ratate()方法和scale()方法的影响。