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]）内：
- 水平线（对应固定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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
