Canvas绘图基于2D渲染上下文，通过命令式API操作路径实现；需先获取ctx = canvas.getContext('2d')，再用fillRect/strokeRect或beginPath+moveTo+lineTo+arc+fill/stroke绘制，配合样式设置与save/restore状态管理。
Canvas 绘图靠的是 2D 渲染上下文（2D context），不是直接画图形，而是通过调用一系列方法，在内存中“描边”或“填充”路径，最终显示在页面上。核心是先获取上下文，再用命令式 API 操作。
获取绘图上下文
必须先拿到 2d 上下文对象，所有绘图操作都通过它进行：
<canvas id="myCanvas" width="400" height="300"></canvas>
const canvas = document.getElementById('myCanvas');<br>const ctx = canvas.getContext('2d');
立即学习“Java免费学习笔记（深入）”；
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
基础形状绘制方法
Canvas 不提供“画矩形”“画圆”这样的高级图形对象，而是封装了常用路径的快捷方法：
-
矩形：直接绘制，不依赖路径
ctx.fillRect(x, y, width, height);—— 填充ctx.strokeRect(x, y, width, height);—— 描边ctx.clearRect(x, y, width, height);—— 清空指定区域 -
路径类图形（线、三角形、圆、多边形等）：需配合路径 API 使用
ctx.beginPath();—— 开始新路径（必调，否则会累积旧路径）ctx.moveTo(x, y);—— 移动画笔到起点ctx.lineTo(x, y);—— 画直线到目标点ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);—— 画圆弧（可组合成整圆）ctx.closePath();—— 自动连线回起点（闭合路径）ctx.fill();或ctx.stroke();—— 才真正渲染
常用样式与状态控制
绘图效果由当前上下文状态决定，这些属性影响后续所有绘制：
-
颜色与透明度：
ctx.fillStyle = '#ff6b6b';（填充色），ctx.strokeStyle = 'blue';（描边色），ctx.globalAlpha = 0.7; -
线条样式：
ctx.lineWidth = 3;，ctx.lineCap = 'round';（端点形状），ctx.lineJoin = 'bevel';（连接处样式） -
保存/恢复状态：
ctx.save();记录当前样式和变换，ctx.restore();回退——适合局部设置，避免污染全局
简单例子：画一个带描边的红色圆
ctx.beginPath();<br>ctx.arc(200, 150, 50, 0, Math.PI * 2); // 圆心(200,150)，半径50<br>ctx.fillStyle = 'red';<br>ctx.fill();<br>ctx.strokeStyle = 'darkred';<br>ctx.lineWidth = 2;<br>ctx.stroke();
基本上就这些。Canvas 是“命令式绘图”，关键在于理解路径（path）机制和上下文状态管理。不复杂但容易忽略 beginPath() 和 save()/restore()，导致意外叠加或样式错乱。
