canvas宽高必须用html的width/height属性设置，因其控制位图缓冲区大小；仅用css会导致拉伸失真、坐标错位、线条模糊；正确做法是直接在标签中声明整数像素值，如width="800" height="600"。
canvas 宽高必须用 HTML width/height 属性设置
Canvas 的宽高不是样式问题，而是位图缓冲区大小问题。只靠 style="width:800px;height:600px" 会导致绘图拉伸、鼠标坐标错位、线条模糊——因为底层缓冲区仍是默认的 300×150 像素。
正确做法是直接在标签里写属性：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
<canvas id="myCanvas" width="800" height="600">您的浏览器不支持 canvas</canvas>
-
width和height是像素值，不带单位（不能写width="800px"） - 若需缩放显示，再用 CSS 控制
style="width:400px;height:300px"，但必须确保 HTML 属性值与实际绘图分辨率匹配 - 标签内文本是降级内容，仅在不支持 Canvas 的旧浏览器中显示
获取 2D 上下文前必须检查 DOM 就绪和元素存在
getContext("2d") 返回 null 是常见错误源头，通常因为元素没找到或上下文类型拼错。
典型安全写法：
const canvas = document.getElementById("myCanvas");<br>if (!canvas) throw new Error("找不到 canvas 元素");<br>const ctx = canvas.getContext("2d");<br>if (!ctx) throw new Error("浏览器不支持 2D 上下文");
- 确保
<script></script>放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
