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) ## 贝塞尔曲线