Part2-曲線圖形 · 前端小冊

[TOC] # 圓形 `CanvasRenderingContext2D.arc()`用來繪制圓弧。由于圓本質上就是個封閉圓弧，因此，此方法也可以用來繪制正圓。語法： ```js context.arc(x, y, radius, startAngle, endAngle [, anticlockwise]); ``` 參數解釋： - x&emsp;*Number*：圓弧對應的圓心橫坐標 - y&emsp;*Number*：圓弧對應的圓心縱坐標 - radius&emsp;*Number*：圓弧的半徑大小 - startAngle&emsp;*Number*：圓弧開始的角度，單位是弧度 - endAngle&emsp;*Number*：圓弧結束的角度，單位是弧度 - anticlockwise（可選）&emsp;*Boolean*：弧度的繪制是按順時針還是逆時針，默認值為 false，表示按順時針方向繪制 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圓形</title> </head> <body> <canvas id="canvas" width="200" height="150" style="border: 1px dashed gray;"></canvas> </body> </html> <script> window.onload = function () { let cnv = document.getElementById('canvas') let cxt = cnv.getContext('2d') cxt.beginPath() cxt.arc(120, 80, 50, 0, 360*Math.PI/180, true) // 120*Math.PI/180 表示 120° cxt.strokeStyle = 'HotPink' cxt.stroke() // 使用 stroke() 來描邊 cxt.closePath() cxt.beginPath() cxt.arc(30, 30, 30, 0, 360*Math.PI/180, true) cxt.fillStyle = '#9966FF' cxt.fill() // 使用 fill() 來填充 } </script> ``` 繪制效果如下： ![](https://img.kancloud.cn/53/d1/53d1160e558b5b9c864ffec60ab5c682_260x200.png =200x) # 弧線弧線可以使用`arc()`和`arcTo()`方法來繪制。 ## arc() 我們使用`arc()`方法繪制弧線時需要注意不適用`closePath()`來關閉路徑，否則圖形會自動閉合。 ```js cxt.beginPath() cxt.arc(50, 50, 50, 0, 60*Math.PI/180, false) cxt.stroke() ``` ![](https://img.kancloud.cn/32/37/32376dd046ca9820f1a6eca0d7fadaaa_270x197.png =200x) 如果加上`closePath()`效果是這樣的： ```js cxt.beginPath() cxt.arc(50, 50, 50, 0, 60*Math.PI/180, false) cxt.closePath() cxt.stroke() ``` ![](https://img.kancloud.cn/c5/bc/c5bcd02a5b9c4fe7365aa63b4a3f03e1_262x200.png =200x) ## arcTo() [https://www.canvasapi.cn/CanvasRenderingContext2D/arcTo#&syntax](https://www.canvasapi.cn/CanvasRenderingContext2D/arcTo#&syntax) ```js context.arcTo(x1, y1, x2, y2, radius) ``` 參數說明： - x1&emsp;*Number*：第 1 控制點的橫坐標 - y1&emsp;*Number*：第 1 個控制點的縱坐標 - x2&emsp;*Number*：第 2 個控制點的橫坐標 - y2&emsp;*Number*：第 2 個控制點的縱坐標 - radius&emsp;*Number*：圓弧的半徑大小 ![](https://img.kancloud.cn/02/68/026889b5856963c23b87d25f95917632_467x321.png =300x) ## 貝塞爾曲線