水車_ ·繪制圓弧
1. 前言
上一節我們學習了利用 arc 方法繪制一個標準的圓或者圓弧，arc 方法依托于圓心、半徑、起始角和結束角繪制圓弧，今天我們再來學習一下繪制圓弧的方法 arcTo。
2. 利用 arcTo 方法繪制弧線
arcTo() 是利用兩條相交切線來確定圓弧的位置，開始前我們先要搞懂切線的幾個知識點。
如何確定切線？
我們都知道兩點確定一條直線，這里兩條直線相交處有一個交點，交點是兩條線共用的一個點，所以我們只需要三個點就能確定兩條切線。根據切線如何確定圓心？
切線的性質有：
(1)切線和圓只有一個公共點。
(2)切線和圓心的距離等于圓的半徑。
(3)切線垂直于經過切點的半徑。
(4)經過圓心垂直于切線的直線必過切點。
(5)經過切點垂直于切線的直線必過圓心。我們根據切線的垂直線必過圓心，即可確定圓心。
我們來看一張圖片：
上圖中，只要我們確定了 PA、PB 這兩條切線和圓的半徑 OA，即可確定 AB 這條弧線。上圖中，我們沿著 OP 延長線移動 O 點的位置，即可得到半徑不同的圓，也就得到了不同的 AB 弧線。
到這里我們明白了：
- 有三個點就可以確定兩條切線。
- 有圓的半徑就可以確定切線間的一條弧線。
arcTo 就是利用上面的原理來繪制弧線的。arcTo 方法有5個參數，前兩個參數表示的是上圖中 P 點的坐標，也就是切線的交點，第3個和第4個參數表示 PB 切線上的任意一個坐標點，第5個參數表示的是上圖中 OA 的長度，也就是繪制圓的半徑。
特別注意：
第3、4個參數表示的點不是切點！
第3、4個參數表示的點不是切點！
第3、4個參數表示的點不是切點！
arcTo 方法的參數中只有兩個點和一個半徑，我們前面講到要繪制弧線，必須是三個點，那第一個點哪兒去了呢？其實第一個點就是當前畫布中筆觸所在的位置，也就是當前畫布中已經繪制的路徑的終點。
先看整體案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標簽</canvas>
<script>
const canvas = document.getElementById('imooc');
canvas.width=300
canvas.height=300
const ctx = canvas.getContext('2d');
// 繪制弧線
ctx.beginPath();
ctx.moveTo40,40);
ctx.arcTo(260,40, 260,200, 60); //調用了繪制圓的函數
ctx.strokeStyle = "#456795";
ctx.lineWidth = 4;
ctx.stroke();
// ==============一下內容為復制內容=================
// 繪制切線
ctx.beginPath()
ctx.strokeStyle="#ccc";
ctx.lineWidth=1;
ctx.moveTo(40,40);
ctx.lineTo(260,40);
ctx.lineTo(260,260);
ctx.stroke();
//繪制P點
ctx.beginPath();
ctx.arc(260,40,4,0, 2*Math.PI)
ctx.fillStyle = "#000"
ctx.fill()
//繪制A點
ctx.beginPath();
ctx.arc(40,40,4,0, 2*Math.PI)
ctx.fillStyle = "#000"
ctx.fill()
//繪制B點
ctx.beginPath();
ctx.arc(260,200,4,0, 2*Math.PI)
ctx.fillStyle = "#000"
ctx.fill()
//繪制切點
ctx.beginPath();
ctx.arc(200,40,4,0, 2*Math.PI)
ctx.fillStyle = "yellow"
ctx.fill()
//繪制切點
ctx.beginPath();
ctx.arc(260,100,4,0, 2*Math.PI)
ctx.fillStyle = "yellow"
ctx.fill()
//繪制圓心 O 點
ctx.beginPath();
ctx.arc(200,100,4,0, 2*Math.PI)
ctx.fillStyle = "blue"
ctx.fill()
//繪制輔助圓
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle="#ccc"
ctx.arc(200,100,60,0, 2*Math.PI)
ctx.stroke()
</script>
</body>
</html>
運行結果：
我們對上面的繪制弧線代碼做拆分講解：
-
開始一個新路徑。
ctx.beginPath(); -
確定第一個坐標點 A 點，A 點是當前已有路徑的終點。
ctx.moveTo(40,40);我換一個寫法：
ctx.moveTo(40,0); ctx.lineTo(80,40);這時候 A 點的位置就變成了 (80, 40)。
-
根據切線交點、第二條切線上的某個點和半徑開始繪制弧線。
ctx.arcTo(260,40, 260,200, 60); //調用了繪制圓的函數這里需要注意三點：
(1) A 點和 PA 切線的切點會被自動連接起來，但是 PB 切線上的切點和 B點不會自動連接起來。
(2) A 點肯定在路徑上，B 點不一定在路徑上。
(3) 切點由 canvas 自動計算。 -
設置繪制樣式以及開始描邊。
ctx.strokeStyle = "#456795"; ctx.lineWidth = 4; ctx.stroke();
我們從案例中可以看到，繪制一個圓形路徑只需要調用一個函數即可，arc 方法和我們之前學過的 rect 繪制矩形的方法類似，也是繪制了一個路徑，我們后續對路徑的描邊或者填充依然是需要調用 stroke 或者 fill 方法的。
3. 繪制圓角矩形
直接看案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標簽</canvas>
<script>
const canvas = document.getElementById('imooc');
canvas.width=300
canvas.height=300
const ctx = canvas.getContext('2d');
// 繪制圓角矩形
ctx.beginPath();
ctx.moveTo(80,40);
ctx.arcTo(260,40, 260,200, 40);
ctx.arcTo(260,260, 200,260, 40);
ctx.arcTo(40,260, 40,100, 40);
ctx.arcTo(40,40, 80,40,40)
ctx.strokeStyle = "#456795";
ctx.lineWidth = 4;
ctx.stroke();
ctx.fillStyle = "#ccc";
ctx.fill();
</script>
</body>
</html>
運行結果：
4. arc 和 arcTo 對比
相同點：
- 都是繪制圓弧。
不同點：
arc通過圓心 + 半徑 + 弧度繪制圓弧，arcTo是根據切線 + 半徑繪制圓弧。arc可以繪制任意弧度的圓弧，arcTo只能繪制小于180度的圓弧。arc可以不需要起點，可以直接繪制，arcTo繪制前必須存在一個端點。arc可以設置繪制方向，arcTo只能由切線控制。
5. 方法整理
本小節中我們使用到一個新的繪制圓弧的方法 arcTo。
5.1 arcTo()方法
arcTo 方法作用是繪制一個切線為 PA 和 PB、半徑為 r 的圓弧，圓弧由切線控制。
變量說明：
| 變量名 | 類型 | 是否必須 | 說明 |
|---|---|---|---|
| x1 | Number | 是 | 切線交點P的X坐標。 |
| y1 | Number | 是 | 切線交點P的Y坐標。 |
| x2 | Number | 是 | 指PB切線的任意一點的X坐標。 |
| y2 | Number | 是 | 指PB切線的任意一點的Y坐標。 |
| r | Number | 是 | 圓的半徑。 |
6. 總結
本小節我們主要學習了利用 arcTo 方法繪制圓弧，本節主要難點在于理解繪制的原理，希望同學們多多練習加深記憶。
2025 imooc.com All Rights Reserved |