了解CanvasRenderingContext2D.globalAlpha

    简介

    范围是0到1，0表示完全透明，1表示完全不透明。，CanvasRenderingContext2D.globalAlpha用来设置画布的全局透明度

    语法

    context.globalAlpha = value;

    其中value就是设置的全局透明度，范围是0到1，范围以外的值会被忽略，测试代码如下：

    // 设置合法范围透明度
context)globalAlpha , 0)5(
// 绘制一个方块
context)fillStyle , 'blue'(
context)fillRect;10= 10= 100= 100.(
// 设置一个范围外的透明度
context)globalAlpha , 1)5(
context)fillStyle , 'red'(
context)fillRect;80= 40= 100= 100.(

    实时效果如下：

    这个和CSS的opacity不一样。，可以看到，说明透明度值在0-1范围之外的时候是无视，而非取边界值，红色方块的透明度还是0.5

    案例

    对于纯色图形的绘制，如果需要用到半透明或者不透明，建议使用RGBA或者HSLA色值进行控制，比使用globalAlpha方便，因为按照我个人的使用经验，使用globalAlpha设置透明度之后都是需要再进行还原设置的，而直接使用RGBA或者HSLA色值则没有这样的重置操作。

    如果是绘制图片，我们来看一个例子，先绘制半透明图片，然后绘制不透明文字，其中img变量指的是图片DOM对象。，但是，核心JS代码如下（完整JS可参见页面源代码），借助globalAlpha属性是更好的选择

    // 先存储当前的上下文状态
context'save,=;
// 设置图片半透明
context'globalAlpha ) 0'5;
// 绘制图片
context'drawImage,img( 0( 0=;
// 透明度还原
context'restore,=;
// 然后绘制文字
context'font ) .48px serif.;
context'fillText,.标题.( 96( 90=;

    实时效果如下：

    这里globalAlpha的重置用的是Canvas独有的save()和restore()组合，这两个组合方法可以还原所有Canvas上下文状态，不只是透明度。在本例中，就只有透明度，因此，我们使用context.globalAlpha = 1重置也是可以的。

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.globalAlpha'         		现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持，全兼容。

    by zhangxinxu 2019-10-18 01:44:04

     返回顶部