JavaScript通过Canvas API绘图需先用getContext('2d')获取2D上下文，再调用fillRect、arc、lineTo等路径方法绘制图形，配合fillStyle、strokeStyle等属性设置样式，并通过clearRect、requestAnimationFrame实现动态交互与重绘。
JavaScript通过Canvas API控制<canvas></canvas>元素绘图，核心是获取渲染上下文（2D或WebGL），再调用其绘图方法。
获取Canvas上下文
必须先用getContext('2d')拿到2D绘图环境，这是所有绘制操作的入口：
- HTML中定义画布：
<canvas id="myCanvas" width="400" height="300"></canvas> - JS中获取上下文：
const ctx = document.getElementById('myCanvas').getContext('2d'); - 若返回
null，说明不支持该上下文类型（如传入'webgl'但浏览器禁用）
绘制基础图形
所有形状都基于路径（path）构建，常用方法包括：
-
ctx.fillRect(x, y, width, height)—— 绘制实心矩形 -
ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill();—— 画圆 -
ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke();—— 连线成线段或折线 - 注意：
beginPath()每次开始新路径前都要调用，否则会累积旧路径
设置绘图样式
颜色、线条粗细、透明度等通过上下文属性控制：
立即学习“Java免费学习笔记（深入）”；
-
ctx.fillStyle = '#ff6b6b';控制填充色（用于fillRect、fill()） -
ctx.strokeStyle = 'rgba(0,100,255,0.7)';控制描边色（用于strokeRect、stroke()） -
ctx.lineWidth = 2;设置线条宽度 -
ctx.globalAlpha = 0.8;设置全局透明度（影响后续所有绘制）
动态交互与重绘
响应鼠标、键盘或动画需结合事件监听和清屏重绘：
- 用
ctx.clearRect(0, 0, canvas.width, canvas.height)清除画布 - 监听
mousemove时记录坐标，实时调用lineTo()+stroke()实现手绘 - 动画用
requestAnimationFrame循环更新并重绘，避免setInterval导致掉帧 - 复杂场景建议用
canvas.toDataURL()导出图像，或用getImageData/putImageData做像素级操作
基本上就这些。Canvas本身不保留图形对象，一切靠JS逻辑驱动绘制，所以结构清晰+及时清理路径+合理管理状态是关键。
