canvas 画个直角坐标系

要在HTML5的Canvas上画一个直角坐标系，首先需要创建一个Canvas元素，并获取它的2D渲染上下文。接下来，我们可以按照以下步骤绘制：

1. 创建Canvas元素及上下文：

<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
</script>

2. 定义轴线：
- 绘制x轴和y轴线：从坐标(0,0)开始，分别向左和上绘制到画布边缘。

ctx.beginPath();
ctx.moveTo(0, 0); // 左上角(0, 0)
ctx.lineTo(canvas.width, 0); // x轴到右
ctx.lineTo(0, canvas.height); // y轴到下
ctx.stroke(); // 绘制线

3. 添加刻度和标签：
- 定义间隔并添加刻度点（这里以10为单位）：

for (var i = 0; i <= canvas.width; i += 100) {
  ctx.beginPath();
  ctx.moveTo(i, 0);
  ctx.lineTo(i, canvas.height);
  ctx.stroke();

  for (var j = 0; j <= canvas.height; j += 100) {
    ctx.beginPath();
    ctx.moveTo(0, j);
    ctx.lineTo(canvas.width, j);
    ctx.stroke();
  }

  // 如果不是起始点，加上数字标签
  if (i !== 0 || j !== 0) {
    ctx.font = '12px Arial';
    ctx.fillText(j, i - 10, j + 10); // x轴标签
    ctx.fillText(i, canvas.width - 10, j + 10); // y轴标签
  }
}

这将创建一个简单的直角坐标系，包括x轴、y轴以及每100像素的刻度。