canvas画xy坐标轴

可以通过以下的方式绘制xy坐标轴：

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

//设置横坐标起点和终点
const startX = 50;
const endX = 500;
//设置纵坐标起点和终点
const startY = 50;
const endY = 500;

//绘制x轴
ctx.beginPath();
ctx.moveTo(startX, endY);
ctx.lineTo(endX, endY);
ctx.stroke();

//绘制y轴
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(startX, endY);
ctx.stroke();

//绘制x轴箭头
ctx.beginPath();
ctx.moveTo(endX - 10, endY - 10);
ctx.lineTo(endX, endY);
ctx.lineTo(endX - 10, endY + 10);
ctx.stroke();

//绘制y轴箭头
ctx.beginPath();
ctx.moveTo(startX - 10, startY + 10);
ctx.lineTo(startX, startY);
ctx.lineTo(startX + 10, startY + 10);
ctx.stroke();

这段代码将在id为myCanvas的canvas元素上绘制出一个从(50,50)到(500,500)的xy坐标轴，并在两端绘制箭头。