HTML宝典(第 1 版)
4.5.4 阴影
阅读(

HTML基础

HTML元素

表单及应用

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。

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

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()方法的影响。

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验