Canvas绘制曲线

深碍√TFBOYSˉ_ 2021-12-14 13:49 532阅读 0赞

### 文章目录 ###

*  圆弧
 *  贝塞尔曲线

# 圆弧 #

圆弧使用`arc`方法绘制，画圆的时候画的弧度是从0到2π，而想要画圆弧就调整参数只画出部分圆即可。

const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    ctx.arc(100, 100, 100, 0, Math.PI / 2);
    ctx.stroke();

![\[外链图片转存失败(img-mX1psuU8-1562208454632)(http://note.youdao.com/yws/res/16087/68DDC7D0F041497C881CF1B5A622A7D7)\]][img-mX1psuU8-1562208454632_http_note.youdao.com_yws_res_16087_68DDC7D0F041497C881CF1B5A622A7D7]

**注意该方法还有第6个参数，即是否以逆时针方向画圆。默认为false。**

若设为`true`：

![\[外链图片转存失败(img-DAJwYQ9Y-1562208454634)(http://note.youdao.com/yws/res/16093/15331B6E06084FB18596F7FF9511035A)\]][img-DAJwYQ9Y-1562208454634_http_note.youdao.com_yws_res_16093_15331B6E06084FB18596F7FF9511035A]

别忘了还可以使用`fill`方法来填充一个圆，它会自动形成一个封闭区域并填充。

const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    ctx.arc(100, 100, 100, 0, Math.PI / 2);
    ctx.fill();

![\[外链图片转存失败(img-APTZIqS7-1562208454635)(http://note.youdao.com/yws/res/16096/8C9989175284489FB429C4260125896D)\]][img-APTZIqS7-1562208454635_http_note.youdao.com_yws_res_16096_8C9989175284489FB429C4260125896D]

# 贝塞尔曲线 #

二次贝塞尔曲线需要三个控制点，代码如下：

const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    ctx.moveTo(200, 200);
    ctx.quadraticCurveTo(355, 213, 401, 357);
    ctx.stroke();

![\[外链图片转存失败(img-E2xngGyz-1562208454636)(http://note.youdao.com/yws/res/16105/ED03DC63B633497190AA270EB515F2E2)\]][img-E2xngGyz-1562208454636_http_note.youdao.com_yws_res_16105_ED03DC63B633497190AA270EB515F2E2]

[img-mX1psuU8-1562208454632_http_note.youdao.com_yws_res_16087_68DDC7D0F041497C881CF1B5A622A7D7]: /images/20211214/7d81c0397f2f4b56b0df37fdded10c0f.png
[img-DAJwYQ9Y-1562208454634_http_note.youdao.com_yws_res_16093_15331B6E06084FB18596F7FF9511035A]: /images/20211214/d33e7c8eb293491d91492736e4ff4d73.png
[img-APTZIqS7-1562208454635_http_note.youdao.com_yws_res_16096_8C9989175284489FB429C4260125896D]: /images/20211214/c9fe30afdd5545ad96fc63906366dd56.png
[img-E2xngGyz-1562208454636_http_note.youdao.com_yws_res_16105_ED03DC63B633497190AA270EB515F2E2]: /images/20211214/5dd2822e305e4f3782b0bbb45405d8f4.png