HTML5 畫布中的透明度 · ZetCode 中文系列教程

# HTML5 畫布中的透明度 > 原文： [https://zetcode.com/gfx/html5canvas/transparency/](https://zetcode.com/gfx/html5canvas/transparency/) 在 HTML5 畫布教程的這一部分中，我們討論透明度。我們提供一些基本定義和兩個示例。 ## 透明度說明透明性是指能夠透視材料的質量。了解透明度的最簡單方法是想象一塊玻璃或水。從技術上講，光線可以穿過玻璃，這樣我們就可以看到玻璃后面的物體。在計算機圖形學中，我們可以使用 alpha 合成實現透明效果。 Alpha 合成是將圖像與背景組合以創建部分透明外觀的過程。合成過程使用 alpha 通道。 Alpha 通道是圖形文件格式的 8 位層，用于表達半透明性（透明度）。每個像素的額外八位用作掩碼，表示 256 級半透明。 ## 透明矩形下一個示例繪制了十個具有不同透明度級別的矩形。 `transparent_rectangles.html` ```js <!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> ``` 我們繪制了十個具有不同透明度級別的藍色矩形。 ```js ctx.fillStyle = "blue"; ``` 矩形將填充藍色。 ```js var alpha = i * 0.1; ``` `alpha`值在`for`循環中動態變化。在每個循環中，它減少了 10% 。 ```js ctx.globalAlpha = alpha; ``` `globalAlpha`屬性指定在形狀和圖像繪制到畫布上之前應用于其的 alpha 值。該值的范圍是 0.0（完全透明）到 1.0（完全不透明）。 ```js ctx.fillRect(50*i, 20, 40, 40); ``` `fillRect()`方法繪制一個填充的矩形。它的參數是 x 和 y 坐標以及矩形的寬度和高度。 ![Transparent rectangles](https://img.kancloud.cn/d5/c9/d5c9b1cfb2b1cc11e7ea8fc12939a9d7_616x194.jpg) 圖：透明矩形 ## 淡出演示在下一個示例中，我們將淡出圖像。圖像將逐漸變得更加透明，直到完全不可見為止。 `fadeout.html` ```js <!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 值都會減小，并重新繪制圖像。 ```js img = new Image(); img.src = 'mushrooms.jpg'; img.onload = function() { ctx.drawImage(img, 10, 10); } ``` 這些行將在畫布上加載并顯示圖像。 ```js fadeOut(); ``` 在`init()`函數內部，我們調用`fadeOut()`函數，該函數將啟動動畫。 ```js if (alpha <= 0) { return; } ``` 當`alpha`值達到零時，動畫終止。 `requestAnimationFrame()`函數不再調用`fadeOut()`函數。 ```js requestAnimationFrame(fadeOut); ``` `requestAnimationFrame()`是創建動畫的便捷函數。它告訴瀏覽器執行動畫。該參數是在重畫之前要調用的函數。瀏覽器為動畫選擇最佳幀速率。 ```js ctx.clearRect(0,0, canvas.width, canvas.height); ``` `clearRect()`方法刪除畫布。 ```js ctx.globalAlpha = alpha; ctx.drawImage(img, 10, 10); ``` 考慮到新的 Alpha 值，將設置新的全局 Alpha 值并重新繪制圖像。 ```js alpha += -0.01; ``` 最后，`alpha`降低。在下一個動畫周期中，將以降低的`alpha`值繪制圖像。在 HTML5 畫布教程的這一部分中，我們討論了透明度。