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

JavaScript 通过 Canvas API 操作 元素的绘图上下文(2D 或 WebGL),实现图形绘制、状态管理、像素控制和帧循环动画。核心在于获取上下文、调用绘图方法、更新状态、反复重绘。
获取绘图上下文并设置基础环境
Canvas 是一个位图画布,本身不渲染内容,必须通过 JavaScript 获取上下文才能绘图:
- 用
getContext('2d')获取 2D 渲染上下文(最常用);getContext('webgl')用于 3D - 确保 DOM 加载完成后再获取 canvas 元素,推荐使用
DOMContentLoaded或将脚本放在










