Canvas 透明度 globalAlpha

一般情况下,我们要绘制一个有点透明度的图形,采用的方案就是将颜色值 ( RGBA ) 中的 A 设置为一个比例,比如 80% 透明就是 A = 255 * 0.8

注意: 完全透明是 0,完全不透明是 255

然后翻看 Canvas API 手册的时候发现有一个属性 globalAlpha ,它用于设置全局透明度

什么意思呢? 也就是和 fillStyle 一样,一旦设置了就永久生效,除非再次调用它重新设置

Canvas globalAlpha 属性

ctx..globalAlpha 属性用于设置全局透明度,那么加下来绘制的图形和图像都会保持一定的透明度

它的取值范围为 [0.0,1.0] 从完全透明到完全不透明

要注意,如果设置该值,除非再次调用重新设置,否则永久生效

语法

ctx.globalAlpha = value;
说明
value 一个在 0.0 (完全透明)和 1.0 (完全不透明)之间的浮点数。 默认值是 1.0

如果数值 value 不在范围内,包括 InfinityNaN ,无法赋值,那么 globalAlpha 会保持原有的数值

范例

设置全局透明度为 0.8 ,然后绘制一些矩形

<!DOCTYPE html>
<meta charset="utf-8"> 
<div style="border:1px solid #ccc">
<canvas id="canvas-1" width="520" height="300">
</canvas>
</div>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

ctx.globalAlpha = 0.8

var img = new Image();
img.src = '/static/i/meimei_160x160.png';
img.onload = function() {
    draw(this);
};

function draw(img) {
    ctx.drawImage(img,10,10,img.width,img.height);
    ctx.fillStyle = "green"
    ctx.fillRect( 50,50,200,100);
    ctx.fillStyle = "#ffffff"
    ctx.fillRect(0,0,c.width,c.height);
    ctx.drawImage(img,10+200,10+200,img.width,img.height);
    ctx.fillStyle = "green"
    ctx.fillRect( 50+100,50+100,200,100);   
}

</script>

运行结果如下



Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.