54、画布动画与图形：2D 合成与 WebGL 基础

画布动画与图形：2D 合成与 WebGL 基础

在图形和动画的世界里，画布（Canvas）是一个强大的工具，它能让开发者创造出令人惊叹的视觉效果。本文将深入探讨画布的 2D 合成操作以及 WebGL 的基础知识。

2D 合成操作

在 2D 上下文中，有两个重要的属性用于所有绘图操作： globalAlpha 和 globalCompositionOperation 。

• globalAlpha ：这是一个介于 0 到 1 之间的数字，用于指定所有绘图的透明度。默认值为 0。例如：

// 绘制一个红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
// 更改全局透明度
context.globalAlpha = 0.5;
// 绘制一个蓝色矩形
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);
// 重置
context.globalAlpha = 0;

在这个例子中，蓝色矩形绘制在红色矩形之上。由于在绘制蓝色矩形之前将 globalAlpha 设置为 0.5，所以蓝色矩形变得部分透明，从而可以透过蓝色看到红色矩形。

• global