canvas绘制带箭头坐标轴网格需三步：先用translate和scale将原点移至中心并翻转y轴；再按数学范围画浅灰网格线，注意像素对齐；最后加粗绘制xy轴、添加三角形箭头、标注刻度与标签。

Canvas 绘制带箭头的坐标轴网格，关键在三步：先调整坐标系让数学原点居中、y轴朝上；再画浅色网格线填充可视区域；最后用加粗线条+三角形箭头绘制X/Y轴，并标注刻度。整个过程要特别注意像素对齐（如坐标加0.5）、单位映射（如1数学单位=10像素）和范围裁剪，否则箭头歪斜、网格模糊或刻度溢出。

坐标系变换：把左上角原点搬进中心

Canvas默认原点在左上角，x向右、y向下递增，而数学坐标系要求原点在画布中心、y向上。必须用translate和scale校正：

• 设画布宽600、高400，调用ctx.translate(300, 200)把原点移到中心
• 紧接着ctx.scale(1, -1)翻转y轴方向，此时y正向变为向上
• 可选：再用ctx.scale(10, 10)设定缩放比例（如1数学单位=10像素），方便后续计算

绘制网格线：按步长循环画浅灰线

网格不是填满整个画布，而是限定在你定义的数学范围（如x∈[−50,50]、y∈[−30,30]）内：

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

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

下载

• 水平线（对应固定y值）：对每个y = yMin到yMax、步长为yStep（如10），画从(xMin, y)到(xMax, y)
• 垂直线（对应固定x值）：同理对每个x = xMin到xMax、步长为xStep画线
• 颜色用#eee，线宽设为0.5或1，且所有坐标末尾加0.5（如x + 0.5）避免1px线变模糊

坐标轴与箭头：加粗主轴+三角形终点

坐标轴是过原点的两条直线，箭头用实心三角形绘制在端点处：

• X轴：从(xMin, 0)画到(xMax, 0)，线宽设为2，颜色#000
• Y轴：从(0, yMin)画到(0, yMax)，同样加粗
• X轴箭头（右侧）：以(xMax, 0)为顶点，向左偏移12px得底边中点，再向上下各偏移6px得左右两角，用fill()闭合三角形
• Y轴箭头（上方）：以(0, yMax)为顶点，向下偏移得底边，再向左右各偏移，同法填充

刻度与标签：数值对齐轴线位置

刻度线短于主轴，标签文字写在轴线旁侧，注意对齐方式：

• X轴刻度：在每个x = ...−20, −10, 0, 10, 20...处，画从(x, −5)到(x, 5)的短线（长度10像素）
• 对应文字用ctx.fillText(x, x, −10)，即写在轴线上方10像素处；设置textAlign = 'center'
• Y轴刻度：在每个y处画(−5, y)到(5, y)的短线，文字用textBaseline = 'middle'、textAlign = 'right'写在左侧

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！