HTML5的<canvas>标签支持高效绘图：一、获取2D上下文并清空画布；二、用路径方法批量绘制闭合图形；三、预设样式并封装复用函数；四、用save()/restore()管理绘图状态；五、用requestAnimationFrame实现流畅动画。
如果您希望在网页中实现高效、灵活的图形绘制，HTML5 的 <canvas> 标签提供了直接的像素级控制能力。以下是利用 <canvas> 标签快速绘图的多种实用方法：
一、获取 canvas 上下文并设置基础绘图环境
所有绘图操作都必须通过 CanvasRenderingContext2D 对象执行，因此第一步是获取 2D 渲染上下文，并确保 canvas 元素已正确加载。
1、在 HTML 中定义具有唯一 id 的 canvas 元素：<canvas id="myCanvas" width="400" height="300"></canvas>。
2、使用 JavaScript 获取该元素：const canvas = document.getElementById('myCanvas');。
立即学习“前端免费学习笔记（深入）”；
3、调用 getContext('2d') 方法获取 2D 绘图上下文：const ctx = canvas.getContext('2d');。
4、可选：清除画布以确保起始状态干净：ctx.clearRect(0, 0, canvas.width, canvas.height);。
二、使用路径批量绘制几何图形
通过 beginPath()、moveTo()、lineTo() 等路径方法组合，可一次性构建复杂图形，避免重复设置样式，显著提升绘制效率。
1、调用 ctx.beginPath() 开启新路径。
2、使用 ctx.moveTo(x, y) 定位起始点，例如：ctx.moveTo(50, 50);。
3、用 ctx.lineTo(x, y) 连接线段，如连续调用：ctx.lineTo(150, 50); ctx.lineTo(150, 150); ctx.lineTo(50, 150);。
4、调用 ctx.closePath() 自动连接终点与起点形成闭合区域。
5、使用 ctx.stroke() 描边或 ctx.fill() 填充，完成图形渲染。
三、预设样式并复用绘图函数
将常用绘图参数（如颜色、线宽、字体）提前设置并封装为可复用函数，能大幅减少重复代码，加快开发节奏。
1、统一设置描边与填充颜色：ctx.strokeStyle = '#3498db'; ctx.fillStyle = '#2ecc71';。
2、设定线宽和线条端点样式：ctx.lineWidth = 3; ctx.lineCap = 'round';。
3、定义一个绘制圆角矩形的函数：function drawRoundedRect(x, y, w, h, r) { ... }，内部使用 arcTo 或贝塞尔曲线实现。
4、在需要位置直接调用：drawRoundedRect(20, 20, 100, 60, 10);。
四、利用 save() 和 restore() 快速切换绘图状态
当需在不同区域应用不同变换（如旋转、缩放、平移）或样式时，save() 和 restore() 可保存和恢复整个绘图状态栈，避免手动重置每一项属性。
1、在应用变换前调用 ctx.save();。
2、执行坐标变换：ctx.translate(100, 100); ctx.rotate(Math.PI / 4);。
3、进行绘图操作，例如绘制一条线：ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(50, 0); ctx.stroke();。
4、调用 ctx.restore(); 恢复至上次保存的状态，后续绘图不受前述变换影响。
五、使用 requestAnimationFrame 实现流畅动画绘制
对于需要连续更新的画面（如动态图表、粒子效果），requestAnimationFrame 提供与屏幕刷新率同步的执行时机，比 setTimeout 更高效且更省资源。
1、定义主绘制函数：function animate() { ... }，其中包含清空画布、计算新位置、重绘等逻辑。
2、在函数末尾递归调用自身：requestAnimationFrame(animate);。
3、确保每次绘制前调用 ctx.clearRect(0, 0, canvas.width, canvas.height); 以清除上一帧残留。
4、关键动画参数（如位置、角度）应在函数外声明为变量，并在每次调用中增量更新，例如：x += 2; if (x > canvas.width) x = -50;。
