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>
自己動手試一試 »
