HTML5 canvas 阴影


阴影

在canvas中进行绘制时,不管是文本、图形、还是图像,也不管是描边还是填充,都可以通过设置上下文对象的相关属性,来为它们设置阴影。这些属性及含义见表 4‑4:

表 4‑4 阴影的属性及含义
属性 含义
shadowColor 阴影的颜色,其默认值为完全透明的黑色。因此,如果没有把该属性设置为不透明,则阴影是不可见的。该属性只能设置为一个表示颜色的字符串,不能使用渐变或图案。使用半透明的阴影可以产生很逼真的阴影效果,因为透过阴影还能看到背景
shadowOffsetX 阴影在X轴的偏移量,单位为像素。默认值为0,阴影位于图形正下方,阴影是不可见的。大于0向右偏移,小于0向左偏移。阴影偏移量越大,产生的阴影也越大,同时会感觉绘制的图形在画布是浮得也越高
shadowOffsetY 阴影在Y轴的偏移量,单位为像素。默认值为0,阴影位于图形正下方,阴影是不可见的。大于0向下偏移,小于0向上偏移。阴影偏移量越大,产生的阴影也越大,同时会感觉绘制的图形在画布是浮得也越高
shadowBlur 阴影的模糊值。是一个与像素无关的值,被用于高斯模糊方程中,以便对阴影进行模糊化处理。默认值为0,表示产生一个清晰的阴影。该值越大,表示阴影越模糊

根据canvas规范,只有在满足以下两个条件时,浏览器才会绘制阴影:1)指定了一个非全透明的shadowColor属性值;2)shadowOffsetX、shadowOffsetY、shadowBlur三个属性中,至少有一个属性的值不是0。

以下代码给黑色的文本增加灰色的阴影:

   
  1. context.font = 'bold 35px Arial';
  2. context.textAlign = 'center';
  3. context.textBaseline = 'bottom';
  4. context.fillStyle = '#000';
  5.       
  6. context.shadowOffsetX = 20;
  7. context.shadowOffsetY = -30;
  8. context.shadowColor = "#ccc";
  9. context.shadowBlur = 2;    
  10.       
  11. context.fillText("Hello Canvas", 0, 0);

上述代码中,阴影在X轴的偏移量和Y轴的偏移量都设置的比较大,故产生的阴影也比较远,文本在画布也浮得较高。运行结果如图 4‑24 所示:

阴影效果图4-24 阴影效果

由于阴影的shadowOffsetX属性被设置为正值,而shadowOffsetY属性被设置为负值,故阴影在X轴向右偏移,在Y轴向上偏移。

说明:

shadowOffsetX和shadowOffsetY属性总是在默认坐标系空间中度量的,它不受ratate()方法和scale()方法的影响。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》,并全部在 GitHub 上开源。

版权声明:本文出自 歪脖网 的《HTML宝典》,欢迎在线阅读,并提出宝贵意见。