canvas 是 html5 引入的一个新标签，专门用于在网页上进行动态图形绘制。接下来我们将通过该元素绘制一个简单的矩形，以此演示其基础绘图能力。
1、 新建一个标准的 HTML 文件，结构如下所示。
2、 在 标签内部添加 <canvas></canvas> 元素，并为其设置唯一标识 id="canvas"，同时设定 width 和 height 属性以明确画布尺寸，样式可参照示意图进行调整。
3、 编写对应脚本代码：
4、 为增强页面美观性，我们在 <title></title> 标签之后插入 <style></style> 标签，对 canvas 进行 CSS 样式修饰，进一步改善渲染效果。
5、 对应的样式代码如下（重写版）：
6、 设置文档字符编码，确保中文及特殊符号正常显示：
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
7、 定义矩形在画布中的起始坐标（即左上角位置）、宽高尺寸以及填充颜色。使用 fillRect(x, y, width, height) 方法绘制实心矩形，配合 fillStyle 属性设定颜色值，最终效果如图所示。
8、 相关参数配置如下：
9、 将文件保存为 .html 格式后，用任意现代浏览器打开即可看到所绘矩形，效果如下图所示。
10、 把全部代码整合进 HTML 文件中，保存并运行，即可实时预览绘制结果。
11、 完整源码如下：
12、 }
13、 }
