canvas绘制坐标轴代码

下面是一个绘制带有刻度和箭头的 x 轴和 y 轴坐标轴的代码示例：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;

// 绘制 x 轴
ctx.beginPath();
ctx.moveTo(50, height / 2);
ctx.lineTo(width - 50, height / 2);
ctx.stroke();

// 绘制 x 轴刻度和文字
const xStep = 50;
for (let i = 50 + xStep; i < width - 50; i += xStep) {
  ctx.beginPath();
  ctx.moveTo(i, height / 2 - 5);
  ctx.lineTo(i, height / 2 + 5);
  ctx.stroke();
  ctx.fillText((i - 50) / xStep, i, height / 2 + 20);
}

// 绘制 x 轴箭头
ctx.beginPath();
ctx.moveTo(width - 50, height / 2);
ctx.lineTo(width - 60, height / 2 + 5);
ctx.lineTo(width - 60, height / 2 - 5);
ctx.closePath();
ctx.fill();

// 绘制 y 轴
ctx.beginPath();
ctx.moveTo(50, height - 50);
ctx.lineTo(50, 50);
ctx.stroke();

// 绘制 y 轴刻度和文字
const yStep = 50;
for (let i = height - 50 - yStep; i > 50; i -= yStep) {
  ctx.beginPath();
  ctx.moveTo(45, i);
  ctx.lineTo(55, i);
  ctx.stroke();
  ctx.fillText((height - i - 50) / yStep, 20, i);
}

// 绘制 y 轴箭头
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(45, 60);
ctx.lineTo(55, 60);
ctx.closePath();
ctx.fill();

这段代码会在 Canvas 中绘制一个带有刻度和箭头的 x 轴和 y 轴坐标轴。您可以根据实际需要修改代码，比如修改坐标轴的起点和终点、刻度的间隔、箭头的大小等等。