JavaScript Canvas globalAlpha 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas globalAlpha 属性。此属性控制画布上所有绘图操作的透明度。掌握 globalAlpha 对于创建复杂的视觉效果至关重要。
基本定义
globalAlpha 属性设置整个画布的透明度值。它接受介于 0.0（完全透明）和 1.0（完全不透明）之间的值。设置后，它会影响所有后续的绘图操作，直到被更改。
与影响单个元素的 rgba 颜色不同，globalAlpha 会对设置后绘制的所有内容应用统一的透明度。这对于创建分层效果和淡入淡出动画非常有用。
基本的 globalAlpha 用法
此示例演示了如何绘制具有不同透明度级别的形状。
<!DOCTYPE html>
<html>
<head>
<title>Basic globalAlpha</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Opaque rectangle
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
// Semi-transparent circle
ctx.globalAlpha = 0.5;
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fill();
</script>
</body>
</html>
在此基本示例中，我们首先绘制一个完全不透明的红色矩形。然后，在绘制蓝色圆之前，我们将 globalAlpha 设置为 0.5（50% 透明）。
圆看起来是半透明的，可以看到背景（或任何下面的形状）。这演示了 globalAlpha 的基本功能。
分层透明
此示例显示了 globalAlpha 如何以不同的方式影响重叠的形状。
<!DOCTYPE html>
<html>
<head>
<title>Layered Transparency</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Background
ctx.fillStyle = 'lightgray';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// First layer (more transparent)
ctx.globalAlpha = 0.3;
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 200, 100);
// Second layer (less transparent)
ctx.globalAlpha = 0.7;
ctx.fillStyle = 'blue';
ctx.fillRect(100, 80, 200, 100);
</script>
</body>
</html>
在这里，我们创建了一个浅灰色背景，然后绘制了两个具有不同透明度级别的重叠矩形。红色矩形比蓝色矩形更透明（0.3 对 0.7）。
结果显示了 globalAlpha 如何影响底层图层的可见性。蓝色矩形看起来更实心，而红色矩形显示更多背景。
淡入淡出动画
此示例演示了如何使用 globalAlpha 创建简单的淡入淡出动画。
<!DOCTYPE html>
<html>
<head>
<title>Fade Animation</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let alpha = 0;
let direction = 0.01;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalAlpha = alpha;
ctx.fillStyle = 'green';
ctx.fillRect(100, 75, 100, 50);
alpha += direction;
if (alpha >= 1 || alpha <= 0) direction *= -1;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
此动画会持续地淡入淡出绿色矩形。alpha 值在 0 和 1 之间振荡，每帧变化 0.01。
requestAnimationFrame 方法创建了一个流畅的动画循环。当 alpha 到达任一极端（0 或 1）时，方向会反转。
图像透明
此示例显示了如何将 globalAlpha 应用于在画布上绘制的图像。
<!DOCTYPE html>
<html>
<head>
<title>Image Transparency</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
// Draw opaque background
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw semi-transparent image
ctx.globalAlpha = 0.6;
ctx.drawImage(img, 50, 50, 200, 100);
};
</script>
</body>
</html>
在这里，我们加载了一个图像，并以 60% 的不透明度（globalAlpha = 0.6）将其绘制在黑色背景上。图像看起来是半透明的，可以看到背景。
请注意，我们使用 onload 事件等待图像加载。这确保在尝试绘制图像之前图像已准备就绪。
复杂分层
此示例演示了使用多个 globalAlpha 值的复杂分层。
<!DOCTYPE html>
<html>
<head>
<title>Complex Layering</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Background grid
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'lightgray';
ctx.lineWidth = 1;
for (let x = 0; x <= canvas.width; x += 20) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
}
for (let y = 0; y <= canvas.height; y += 20) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
// Layer 1 - Red circle (low opacity)
ctx.globalAlpha = 0.3;
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(150, 150, 80, 0, Math.PI * 2);
ctx.fill();
// Layer 2 - Green square (medium opacity)
ctx.globalAlpha = 0.6;
ctx.fillStyle = 'green';
ctx.fillRect(200, 100, 120, 120);
// Layer 3 - Blue triangle (high opacity)
ctx.globalAlpha = 0.9;
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.moveTo(250, 200);
ctx.lineTo(350, 200);
ctx.lineTo(300, 100);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>
这个复杂的示例创建了一个网格背景，然后绘制了三个具有不同透明度级别的形状。红色圆最透明（0.3），绿色正方形居中（0.6），蓝色三角形几乎不透明（0.9）。
结果显示了形状如何通过透明度进行交互。网格透过所有形状可见，其清晰度因形状的 globalAlpha 而异。
来源
在本文中，我们探讨了使用 globalAlpha 在 HTML Canvas 上创建透明效果的各种技术。掌握此属性对于在 Web 应用程序中创建复杂的视觉效果至关重要。
作者
列出 所有 JS Canvas 教程。