📅 最后修改于: 2023-12-03 14:41:47.325000 🧑 作者: Mango
HTML中的canvas元素提供了一套API来绘制图像，其中globalAlpha属性可以用于设置当前绘制内容的不透明度。
context.globalAlpha = alphaValue;
其中，alphaValue取值范围为0.0（完全透明）到1.0（完全不透明）之间的任意数值。默认值为1.0（完全不透明）。
下面我们通过一个简单的示例来演示如何使用globalAlpha属性。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 绘制矩形
context.fillStyle = "red";
context.fillRect(10, 10, 50, 50);
// 设置透明度
context.globalAlpha = 0.5;
// 绘制矩形
context.fillStyle = "blue";
context.fillRect(30, 30, 50, 50);
</script>
</body>
</html>
在上面的示例中，我们首先使用fillStyle属性设置绘制颜色为红色，并使用fillRect方法绘制一个矩形。接着，我们使用globalAlpha属性将透明度设置为0.5，并使用相同的方法绘制另一个蓝色的矩形。由于透明度被设置为0.5，所以蓝色矩形的颜色会受到一定程度的混合，呈现出半透明的效果。