JavaScript通过Canvas API操作<canvas>元素，需先获取2D/WebGL上下文，设置宽高属性，再调用绘图方法实现静态绘制、requestAnimationFrame动画循环及鼠标交互响应。
JavaScript 通过 Canvas API 操作 <canvas> 元素的绘图上下文（2D 或 WebGL），实现图形绘制、状态管理、像素控制和帧循环动画。核心在于获取上下文、调用绘图方法、更新状态、反复重绘。
获取绘图上下文并设置基础环境
Canvas 是一个位图画布，本身不渲染内容，必须通过 JavaScript 获取上下文才能绘图：
- 用
getContext('2d')获取 2D 渲染上下文（最常用）；getContext('webgl')用于 3D - 确保 DOM 加载完成后再获取 canvas 元素，推荐使用
DOMContentLoaded或将脚本放在</body>前 - 可设置 canvas 的宽高属性（非 CSS 样式），避免拉伸失真：
canvas.width = 800; canvas.height = 600;
绘制静态图形与动态更新
所有绘制操作都通过上下文对象（如 ctx）的方法完成，图形不会自动保留——每次重绘需重新调用绘图指令：
- 清空画布：用
ctx.clearRect(0, 0, canvas.width, canvas.height)或ctx.fillRect()覆盖背景 - 绘制基本形状：如
ctx.fillRect(x, y, w, h)、ctx.beginPath(); ctx.arc(...); ctx.fill() - 绘制文字：
ctx.font = '24px sans-serif'; ctx.fillText('Hello', x, y) - 更新图形只需修改变量（如
x += 2），再在下一次绘制中使用新值
实现流畅动画：requestAnimationFrame 循环
用 requestAnimationFrame 替代 setInterval，让浏览器按刷新率（通常 60fps）调度重绘，更省电、更顺滑：
立即学习“Java免费学习笔记（深入）”；
- 动画函数内完成“更新状态 → 清空画布 → 绘制新帧”三步
- 递归调用自身：
function animate() { /* ... */ requestAnimationFrame(animate); } - 可结合时间戳（
requestAnimationFrame(timestamp)）做时间敏感计算，例如匀速运动：const delta = (timestamp - lastTime) / 1000; x += speed * delta;
响应用户交互：监听事件并驱动图形变化
Canvas 本身不响应鼠标/触摸事件，需监听 canvas 元素事件，并将屏幕坐标转换为 canvas 坐标：
- 监听
canvas.addEventListener('mousemove', e)等事件 - 用
getBoundingClientRect()计算偏移，换算坐标：const rect = canvas.getBoundingClientRect();<br>const x = e.clientX - rect.left;<br>const y = e.clientY - rect.top;
- 常见用途：拖拽图形、点击检测（判断点是否在路径内用
ctx.isPointInPath()或手动计算几何）、画笔效果
