HTML5 颜色及透明度

颜色及透明度

在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属性之前绘制的图形,将不受该属性的影响,它只会影响之后绘制的图形。如:

 
 
  1. context.globalAlpha = 0.4;
  2. context.fillStyle = "#fd0";
  3. context.fillRect(0, 0, 75, 75);
  4. context.fillStyle = "#6c0"
  5. context.fillRect(75, 0, 75, 75);
  6. context.globalAlpha = 0.6;
  7. context.fillStyle = "#09f";
  8. context.fillRect(0, 75, 75, 75);
  9. context.fillStyle = "#f30";
  10. 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用户指南》,并全部在 GitHub 上开源。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值