HTML Canvas 坐标
Canvas 坐标
HTML canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)。
将鼠标悬停在下面的矩形上以查看其 x 和 y 坐标
X
Y
绘制矩形
要在 canvas 上绘制矩形，请使用以下方法
-
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>
自己动手试一试 »
绘制一条线
要在 canvas 上绘制直线，请使用以下方法
-
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>
自己动手试一试 »
绘制圆形
要在 canvas 上绘制圆形，请使用以下方法
-
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>
自己动手试一试 »
