canvas画y轴刻度

要画出一个有刻度的 y 轴，可以按照以下步骤操作：

1. 首先确定 y 轴的起点和终点坐标，例如 (x0, y0) 和 (x0, y1)。

2. 然后确定 y 轴的长度，即 y 轴上需要画多少个刻度。假设需要画 n 个刻度。

3. 计算每个刻度之间的间隔，即 y 轴的长度除以刻度数目 n。假设刻度间隔为 a。

4. 从起点 (x0, y0) 开始，向上每隔一个间隔 a，画一条长度为 b 的直线，作为刻度线。可以使用 canvas 的 lineTo() 方法画直线。

5. 画完所有的刻度线之后，可以添加刻度值。例如，可以在每个刻度线的上方或下方标注刻度值。

下面是一个简单的示例代码，可以画出一个有刻度的 y 轴：

// canvas 画布
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// y 轴起点和终点坐标
const x0 = 50;
const y0 = 50;
const y1 = 350;

// y 轴上的刻度数
const n = 10;

// 刻度间隔和长度
const a = (y1 - y0) / n;
const b = 5;

// 画 y 轴
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(x0, y1);
ctx.stroke();

// 画刻度线和刻度值
for (let i = 0; i < n; i++) {
  const y = y0 + i * a;
  ctx.beginPath();
  ctx.moveTo(x0 - b, y);
  ctx.lineTo(x0, y);
  ctx.stroke();

  ctx.fillText(i + 1, x0 - b * 3, y + a / 2);
}

这段代码会在 canvas 上画出一个从 (50, 50) 到 (50, 350) 的 y 轴，共有 10 个刻度，刻度间隔为 (350 - 50) / 10 = 30，刻度线长度为 5。刻度值会显示在每个刻度线的左侧。