HTML Canvas 曲線
HTML Canvas 曲線
在 canvas 中繪製曲線最常用的三種方法是：
arc()方法（在 Canvas Circles 章節中已描述）quadraticCurveTo()方法bezierCurveTo()方法
quadraticCurveTo() 方法
quadraticCurveTo() 方法用於定義二次貝塞爾曲線。
quadraticCurveTo() 方法包含以下引數：
| 引數 | 描述 |
|---|---|
| cpx | 必需。控制點的 x 座標 |
| cpy | 必需。控制點的 y 座標 |
| x | 必需。終點的 x 座標 |
| y | 必需。終點的 y 座標 |
quadraticCurveTo() 方法需要兩個點：一個控制點和一個終點。起始點是當前路徑中的最後一個點，可以透過在建立二次貝塞爾曲線之前使用 moveTo() 來更改。
要在 canvas 上繪製曲線，請使用以下方法：
-
beginPath()- 開始一個路徑 -
moveTo()- 定義起始位置 -
quadraticCurveTo()- 定義二次貝塞爾曲線 -
stroke()- 繪製它
示例
此二次貝塞爾曲線從 moveTo() 指定的點 (10, 100) 開始。控制點位於 (250, 170)。曲線在 (230, 20) 結束。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 100);
ctx.quadraticCurveTo(250, 170, 230, 20);
ctx.stroke();
</script>
自己動手試一試 »
bezierCurveTo() 方法
bezierCurveTo() 方法用於定義三次貝塞爾曲線。
bezierCurveTo() 方法包含以下引數：
| 引數 | 描述 |
|---|---|
| cp1x | 必需。第一個控制點的 x 座標 |
| cp1y | 必需。第一個控制點的 y 座標 |
| cp2x | 必需。第二個控制點的 x 座標 |
| cp2y | 必需。第二個控制點的 y 座標 |
| x | 必需。終點的 x 座標 |
| y | 必需。終點的 y 座標 |
bezierCurveTo() 方法需要三個點：兩個控制點和一個終點。起始點是當前路徑中的最後一個點，可以透過在建立三次貝塞爾曲線之前使用 moveTo() 來更改。
要在 canvas 上繪製曲線，請使用以下方法：
-
beginPath()- 開始一個路徑 -
moveTo()- 定義起始位置 -
bezierCurveTo()- 定義三次貝塞爾曲線 -
stroke()- 繪製它
示例
此三次貝塞爾曲線從 moveTo() 指定的點 (20, 20) 開始。第一個控制點位於 (110, 150)。第二個控制點位於 (180, 10)。曲線在 (210, 140) 結束。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(110, 150, 180, 10, 210, 140);
ctx.stroke();
</script>
自己動手試一試 »
