HTML5画布中的透明度

最后修改于 2023 年 7 月 17 日

在HTML5画布教程的这一部分，我们将讨论透明度。我们提供一些基本定义和两个示例。

透明度解释

透明度是指能够看穿物质的性质。理解透明度最简单的方法是想象一块玻璃或水。从技术上讲，光线可以穿过玻璃，这样我们就可以看到玻璃后面的物体。

在计算机图形学中，我们可以使用Alpha合成来实现透明效果。Alpha合成是将图像与背景组合以产生部分透明外观的过程。合成过程使用Alpha通道。Alpha通道是图形文件格式中用于表示半透明（透明）的8位图层。每像素额外的八位用作蒙版，表示256个级别的半透明。

透明矩形

下一个示例绘制了十个具有不同透明度级别的矩形。

transparent_rectangles.html

<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas transparent rectangles</title>
<script>
    function draw() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        
        ctx.fillStyle = "blue";
        
        for (var i = 1; i <= 10; i++) {
            
            var alpha = i * 0.1;
            ctx.globalAlpha = alpha;       
            
            ctx.fillRect(50*i, 20, 40, 40);
        }          
    }
</script>    
</head>    

<body onload="draw();">
    <canvas id="myCanvas" width="550" height="200">
    </canvas>
</body>
</html>

我们绘制了十个具有不同透明度级别的蓝色矩形。

ctx.fillStyle = "blue";

矩形将填充蓝色。

var alpha = i * 0.1;

alpha值在for循环中动态变化。在每次循环中，它都会减少10%。

ctx.globalAlpha = alpha;

globalAlpha属性指定在形状和图像绘制到画布之前应用的alpha值。该值范围从0.0（完全透明）到1.0（完全不透明）。

ctx.fillRect(50*i, 20, 40, 40);

fillRect方法绘制一个填充矩形。其参数是矩形的x和y坐标以及宽度和高度。

渐隐演示

在下一个示例中，我们将淡出一个图像。图像将逐渐变得更加透明，直到完全看不见。

fadeout.html

<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas fade out demo</title>
<script>
    var alpha = 1.0;
    var ctx;
    var canvas;
    var img;

    function init() {
        canvas = document.getElementById('myCanvas');
        ctx = canvas.getContext('2d');
        
        img = new Image();
        img.src = 'mushrooms.jpg';
        
        img.onload = function() {
            ctx.drawImage(img, 10, 10);
      };
      
      fadeOut();
    }
    
    function fadeOut() {
        
        if (alpha <= 0) {
            return;
        }         
            
        requestAnimationFrame(fadeOut);
        ctx.clearRect(0,0, canvas.width, canvas.height);
        ctx.globalAlpha = alpha;
            
        ctx.drawImage(img, 10, 10);
 
        alpha += -0.01;
    }        
</script>    
</head>    

<body onload="init();">
    <canvas id="myCanvas" width="350" height="250">
    </canvas>
</body>
</html>

该示例是动画的。在每个动画周期中，alpha值会减小，并且图像会被重新绘制。

img = new Image();
img.src = 'mushrooms.jpg';

img.onload = function() {
    ctx.drawImage(img, 10, 10);
}

这些行在画布上加载并显示图像。

fadeOut();

在init函数中，我们调用fadeOut函数，该函数启动动画。

if (alpha <= 0) {
    return;
}

当alpha值达到零时，动画终止。fadeOut函数不再由requestAnimationFrame函数调用。

requestAnimationFrame(fadeOut);

requestAnimationFrame是一个方便的函数，用于创建动画。它告诉浏览器执行动画。参数是一个要在重绘之前调用的函数。浏览器会为动画选择最佳帧率。

ctx.clearRect(0,0, canvas.width, canvas.height);

clearRect方法会清除画布。

ctx.globalAlpha = alpha;
    
ctx.drawImage(img, 10, 10);

设置新的全局alpha值，并重新绘制图像，同时考虑新的alpha值。

alpha += -0.01;

最后，alpha值减小。在下一个动画周期中，图像将以减小的alpha值绘制。

在HTML5画布教程的这一部分，我们讨论了透明度。

电子书

HTML5画布中的透明度

透明度解释

透明矩形

渐隐演示