HTML宝典(第 1 版)
4.5.2 颜色及透明度
阅读(

HTML基础

HTML元素

表单及应用

Canvas绘图基础

基本用法

使用路径

绘制文本

处理图像和视频

装饰图形

线条的样式

颜色及透明度

在Canvas绘图时,可以通过绘制上下文的strokeStyle属性和fillStyle属性来设置图形的描边颜色和填充颜色。默认颜色为不透明的黑色。

strokeStyle属性和fillStyle属性可以被设置为任意有效的CSS颜色字符串,可以使用颜色名称、十六进制RGB颜色、RGB、RGBA、HSL、HSLA颜色中的任意一种。

在使用RGBA或HSLA颜色时,可以通过设置其透明度(alpha)来实现半透明填充或轮廓效果。alpha的取值范围为0.0(完全透明)~ 1.0(完全不透明),默认值为1.0。

如果既想要半透明的颜色,又不想给每种颜色都设置一个透明度,又或者想要给图像或图案添加半透明效果的话,可以通过全局透明度(globalAlpha)属性来实现。globalAlpha属性的值范围也是0.0(完全透明)~ 1.0(完全不透明),默认值为1.0。

浏览器会把globalAlpha属性指定的透明度应用于所有图形和图像,所以,在绘制大量拥有相同透明度的图形时,该属性就相当高效。但要记住,在设置globalAlpha属性之前绘制的图形,将不受该属性的影响,它只会影响之后绘制的图形。如:

context.globalAlpha = 0.4;
context.fillStyle = "#fd0";
context.fillRect(0, 0, 75, 75);

context.fillStyle = "#6c0"
context.fillRect(75, 0, 75, 75);

context.globalAlpha = 0.6;
context.fillStyle = "#09f";
context.fillRect(0, 75, 75, 75);

context.fillStyle = "#f30";
context.fillRect(75, 75, 75, 75);

上述代码中,前面两个矩形的透明度相同,都是0.4;后面两个矩形的透明度相同,都是0.6。运行效果如图 4‑20 所示:

globalAlpha属性设置透明度
图4-20 globalAlpha属性设置透明度

如果要恢复globalAlpha的初始状态,只需简单的将其重置为1.0即可。当然,也可以调用restore()方法,恢复到save()时的状态。

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验