Canvas和WebGL是JavaScript高性能动画核心技术，Canvas通过2D上下文实现帧动画，需用requestAnimationFrame保证流畅；WebGL基于GPU渲染3D图形，需编写着色器程序，适合复杂视觉效果；两者均依赖高效渲染循环与内存管理，优化策略包括减少重绘、复用对象、使用离屏Canvas和VBO缓存，结合Three.js等库可拓展3D场景、粒子系统及物理模拟应用。
JavaScript 动画编程中，Canvas 和 WebGL 是实现高性能视觉效果的核心技术。它们适用于游戏开发、数据可视化、交互式网页等场景。相比 CSS 动画或 DOM 操作，Canvas 和 WebGL 能直接控制像素级绘制，带来更灵活、更流畅的动画体验。
Canvas 动画：2D 绘制与帧控制
Canvas 提供了一个位图画布，通过 JavaScript 的 2D 渲染上下文可以绘制形状、图像和文本，并实现逐帧动画。
实现流畅 Canvas 动画的关键是使用 requestAnimationFrame 来同步浏览器刷新率，避免卡顿或掉帧。
- 获取 canvas 元素并创建 2D 上下文：
const ctx = canvas.getContext('2d'); - 在每一帧中清空画布、更新对象位置、重新绘制：
- 使用 requestAnimationFrame 循环驱动动画，确保效率和兼容性
例如，让一个小球在屏幕上弹跳：
立即学习“Java免费学习笔记（深入）”；
let x = 50, y = 50;
let dx = 3, dy = 2;
<p>function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2);
ctx.fill();</p><p>x += dx; y += dy;
if (x < 0 || x > canvas.width) dx = -dx;
if (y < 0 || y > canvas.height) dy = -dy;</p><p>requestAnimationFrame(animate);
}
animate();</p>WebGL 动画：3D 图形与着色器编程
WebGL 基于 OpenGL ES，允许在浏览器中运行 GPU 加速的 3D 图形渲染。它比 Canvas 更复杂，但性能更强，适合三维模型、粒子系统和复杂光影效果。
WebGL 直接操作顶点和片段着色器（Shader），需要编写 GLSL 代码来定义图形渲染方式。
- 初始化 WebGL 上下文：
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); - 编写顶点着色器（处理坐标变换）和片段着色器（处理颜色输出）
- 编译着色器程序、绑定缓冲区、传递顶点数据
- 使用 requestAnimationFrame 更新模型矩阵或相机参数，实现旋转、缩放等动画
常见动画包括立方体旋转、纹理流动、粒子喷发等，通常借助 Three.js 等库简化开发，但理解原生 WebGL 有助于优化性能。
性能优化与实用技巧
无论是 Canvas 还是 WebGL，动画流畅性依赖于合理的资源管理和渲染策略。
- 避免频繁创建对象或数组，尽量复用变量，减少垃圾回收压力
- 控制绘制复杂度，不在每一帧重绘静态内容
- 在 WebGL 中使用缓存（VBO）、精简着色器逻辑、按需启用深度测试
- 合理设置帧率上限，防止高刷新率设备过度消耗电量
- 利用离屏 Canvas 预渲染不变元素，提升合成效率
高级应用方向
掌握基础后，可深入以下领域：
- 使用 Three.js 构建完整 3D 场景，加载模型、添加光照和阴影
- 结合 Web Audio API 实现音画同步动画
- 开发粒子系统模拟火焰、烟雾或星空效果
- 实现基于物理引擎（如 Matter.js 或 Ammo.js）的真实运动模拟
- 将 WebGL 用于数据可视化，如大规模地理信息渲染或实时频谱图
基本上就这些。Canvas 适合轻量级 2D 动画，WebGL 提供强大的 3D 能力。两者都依赖 JavaScript 控制渲染循环，关键在于理解绘制流程和性能边界。不复杂但容易忽略的是帧率稳定和内存管理。
