需先用ctx.translate()将原点移至画布中心，再用ctx.scale(1,-1)翻转y轴；然后按设定步长在xmin至xmax、ymin至ymax范围内绘制水平与垂直网格线。
在Canvas中绘制坐标轴和网格线，核心是明确画布坐标系与数学坐标系的差异，并通过平移、缩放等变换让图形符合常规数学绘图习惯。
设置画布与坐标系变换
Canvas默认原点在左上角，x向右递增、y向下递增，而数学坐标系原点通常在中心，y向上递增。需用ctx.translate()将原点移到画布中心，再用ctx.scale(1, -1)翻转y轴方向。例如：
- 设画布宽600、高400，则调用
ctx.translate(300, 200)把原点移到中心 - 紧接着
ctx.scale(1, -1)使y正方向变为向上 - 此时单位长度可自定义（如1像素=0.1个数学单位），便于后续网格计算
绘制网格线
网格由水平线（对应y值）和垂直线（对应x值）组成，需根据设定的步长（如xStep=10、yStep=10）循环绘制。注意限制绘制范围，避免超出可视区域：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 先确定x、y方向的显示范围，例如
xMin=-50, xMax=50, yMin=-30, yMax=30 - 用
for (let x = xMin; x 画竖线：从<code>(x, yMin)到(x, yMax) - 同理画横线，注意线条颜色建议设为浅灰（如
#eee），线宽设为0.5–1，提升可读性
绘制坐标轴与刻度标签
坐标轴是过原点的两条直线，需加粗突出；刻度则在轴上等距标记数值：
- 用
ctx.beginPath()+moveTo(0, yMin)+lineTo(0, yMax)画y轴，x轴同理 - 设置
ctx.lineWidth = 2并用ctx.strokeStyle = '#000'强调坐标轴 - 在x轴上每xStep位置用
fillText(xValue, x, -5)写刻度文字（-5表示在轴上方5像素处），y轴同理，注意文字对齐方式（textAlign = 'center'或'right'）
优化与注意事项
实际使用中容易忽略细节，影响视觉效果和交互一致性：
- 绘制前调用
ctx.save()，绘制后ctx.restore()，防止变换影响后续绘图 - 网格线建议在坐标轴之前绘制，避免被轴线遮挡
- 若需支持缩放/平移，应将变换逻辑封装为函数，统一管理视图参数（如scaleX、scaleY、offsetX、offsetY）
- 文字渲染注意设备像素比（
window.devicePixelRatio），高清屏下可能需要调整字体大小或canvas尺寸
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
