HTML Canvas 坐标
Canvas 坐标
HTML 画布是一个二维网格。
画布的左上角坐标为 (0,0)。
将鼠标悬停在下面的矩形上，查看其 x 和 y 坐标
X
Y
绘制矩形
要绘制画布上的矩形，请使用以下方法
-
fillRect(x, y, width, height)- 定义矩形的起点、宽度和高度
示例
定义一个坐标为 (0,0) 的起点，以及一个 150px 宽、75px 高的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 150, 75);
</script>
动手试试 »
绘制线条
要绘制画布上的直线，请使用以下方法
-
moveTo(x, y)- 定义线条的起点 -
lineTo(x, y)- 定义线条的终点
要实际绘制线条，您必须使用其中一种“墨水”方法，例如 stroke()。
示例
定义一个坐标为 (0,0) 的起点，以及一个坐标为 (200,100) 的终点。然后使用 stroke() 方法实际绘制线条
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
动手试试 »
绘制圆形
要绘制画布上的圆形，请使用以下方法
-
beginPath()- 开始路径 -
arc(x, y, r, startangle, endangle)- 创建弧/曲线。要使用arc()创建圆形：将 startangle 设置为 0，将 endangle 设置为 2*Math.PI。x 和 y 坐标定义圆形的中心。r 定义圆形的半径
示例
使用 arc() 方法定义圆形。然后使用 stroke() 方法实际绘制圆形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
动手试试 »
