如何在HTML5中利用Canvas绘图上下文及其坐标系模型实现基础图形绘制-H5教程-PHP中文网

html5 canvas绘图需先创建canvas元素并设宽高属性，再用document.getelementbyid()获取元素、getcontext('2d')获取上下文；接着按坐标系（原点左上角、y轴向下）定位，调用fillrect、arc、beginpath/lineto/closepath等方法绘制矩形、圆形、路径，并前置设置fillstyle、strokestyle等样式。

如何在html5中利用canvas绘图上下文及其坐标系模型实现基础图形绘制

要在HTML5中用Canvas绘制基础图形，关键在于理解绘图上下文（ctx）的作用和Canvas坐标系的特性，并按规范步骤操作。坐标原点在左上角、Y轴向下为正，这点直接影响图形定位；而所有绘图动作都必须通过获取到的2D上下文对象执行。

创建画布并正确获取2D上下文

先在HTML中声明<canvas></canvas>元素，明确设置width和height属性（单位像素），不要用CSS控制尺寸，否则会拉伸图像：

<canvas id="myCanvas" width="500" height="300"></canvas>
确保DOM加载完成后再执行JavaScript，例如放在<script></script>标签底部，或使用DOMContentLoaded事件

用document.getElementById()拿到元素，再调用.getContext('2d')获得绘图上下文：

const canvas = document.getElementById('myCanvas');<br>
  const ctx = canvas.getContext('2d');

掌握Canvas坐标系与定位逻辑

Canvas采用像素级笛卡尔坐标系，但Y轴方向与数学习惯相反：

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

原点(0, 0)位于画布左上角
X值增大 → 向右移动；Y值增大 → 向下移动
所有坐标（如fillRect(x, y, w, h)中的x和y）指矩形左上角位置，不是中心点
例如：想在画布中央画一个50×50的方块，需计算x = (canvas.width - 50) / 2，y = (canvas.height - 50) / 2

绘制常见基础图形的方法

所有图形绘制都依赖上下文对象的API，注意样式设置要写在绘图命令之前：

填充矩形：ctx.fillStyle = '#4a90e2'; ctx.fillRect(80, 60, 120, 80);
描边矩形：ctx.strokeStyle = 'orange'; ctx.lineWidth = 2; ctx.strokeRect(220, 60, 120, 80);

路径类图形（如三角形）：

ctx.beginPath();<br>
  ctx.moveTo(150, 180); // 起点<br>
  ctx.lineTo(100, 250); // 左下角<br>
  ctx.lineTo(200, 250); // 右下角<br>
  ctx.closePath(); // 自动连回起点<br>
  ctx.fillStyle = 'purple'; ctx.fill();<br>
  ctx.strokeStyle = 'black'; ctx.stroke();