JavaScript如何与Canvas交互_创建动态图形和动画？

JavaScript通过Canvas API操作元素，需先获取2D/WebGL上下文，设置宽高属性，再调用绘图方法实现静态绘制、requestAnimationFrame动画循环及鼠标交互响应。

JavaScript 通过 Canvas API 操作 元素的绘图上下文（2D 或 WebGL），实现图形绘制、状态管理、像素控制和帧循环动画。核心在于获取上下文、调用绘图方法、更新状态、反复重绘。

获取绘图上下文并设置基础环境

Canvas 是一个位图画布，本身不渲染内容，必须通过 JavaScript 获取上下文才能绘图：

• 用 getContext('2d') 获取 2D 渲染上下文（最常用）；getContext('webgl') 用于 3D
• 确保 DOM 加载完成后再获取 canvas 元素，推荐使用 DOMContentLoaded 或将脚本放在