HTML Canvas 坐标
画布坐标
HTML 画布是一个二维的网格。
画布的左上角坐标为 (0,0)。
在上一章中，我们使用了方法：fillRect(0,0,150,75)。
意思是：从左上角 (0,0) 开始绘制一个 150x75 像素的矩形。
坐标实例
将鼠标悬停在下面的矩形上，可查看其 x 和 y 坐标：
X
Y
画线
要在画布上绘制直线，请使用以下方法：
- moveTo(x,y) - 定义线的起点
- lineTo(x,y) - 定义线的终点
要实际绘制线条，您必须使用“颜料”方法之一，比如 stroke()。
实例
在位置 (0,0) 定义起点，在位置 (200,100) 定义终点。然后使用 stroke() 方法来实际地绘制线条：
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
画一个圆
要在画布上绘制圆形，请使用以下方法：
- beginPath() - 开始一条路径
- arc(x,y,r,startangle,endangle) - 创建圆弧/曲线
要使用 arc() 创建圆：请将起始角度设置为 0，结束角度设置为 2*Math.PI。 x 和 y 参数定义圆心的 x 和 y 坐标。 r 参数定义圆的半径。
实例
使用 arc() 方法定义一个圆。然后使用 stroke() 方法来实际绘制圆：
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();