Canvas绘图需手动建立数据与像素的线性映射关系，核心是通过缩放函数将数据范围映射到画布坐标系，并注意Y轴方向相反、视觉编码选择及像素精度处理。

Canvas 绘图不是自动适配数据的图表库，它需要你手动把每个数据点“翻译”成像素位置和图形属性。核心就一件事：建立数据值和画布坐标/样式之间的对应关系。

明确画布坐标系与数据范围

Canvas 原点在左上角，X 向右、Y 向下——这和数学坐标系相反，Y 轴方向要特别注意。你需要先确定两组范围：

• 数据本身的范围：比如销售额从 1200 到 8600，时间跨度是 2023 年 1 月到 2025 年 12 月
• 画布可用区域：比如留出左右各 40px 边距，高度方向预留顶部标题和底部标签空间后，绘图区高为 320px

这两组范围之间必须做线性映射，不能直接用原始数值去画。

实现线性映射函数

最常用也最可靠的方式是写一个通用缩放函数，把任意输入值转成目标区间内的输出值：

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

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

下载

function scale(value, dataMin, dataMax, canvasMin, canvasMax) {
  return canvasMin + (value - dataMin) * (canvasMax - canvasMin) / (dataMax - dataMin);
}

例如，把销售额 5000 映射到高度方向（假设绘图区 y=0 是顶部，y=320 是底部）：

• 数据最小值 1200 → 画布 y=320（底部）
• 数据最大值 8600 → 画布 y=0（顶部）
• 那么 5000 对应 y = scale(5000, 1200, 8600, 320, 0) ≈ 132

为不同图形选择合适视觉编码

同一组数据可以表达为多种图形，关键看你想强调什么：

• 折线图：把每个 (x 时间, y 数值) 映射为 canvas 坐标，用 moveTo 和 lineTo 连接
• 柱状图：x 决定柱子横坐标（通常居中），y 决定柱高（从底部向上画矩形），注意 y 值越大，矩形顶部越靠上
• 散点图：每个点映射为圆心坐标，半径或颜色可再编码另一维数据（如用户等级、误差范围）
• 饼图：不直接用坐标映射，而是把数值转为角度（value / total × 360°），再用 arc 绘制扇形

注意像素精度与抗锯齿处理

Canvas 默认开启抗锯齿，但对细线或精确对齐容易模糊。若需锐利边缘：

• 确保坐标是整数（Math.round(x)），避免 0.5 像素偏移
• 绘制 1px 线条时，可将坐标设为 x + 0.5，让线条落在像素中心（如 ctx.lineWidth = 1; ctx.strokeRect(10.5, 20.5, 100, 1)）
• 文字对齐用 textBaseline = 'middle' 和 textAlign = 'center'，配合 y 坐标加减半高，避免上下错位