Canvas绘制曲线

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

文章目录

  • 圆弧
  • 贝塞尔曲线

圆弧

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

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

\[外链图片转存失败(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)\]

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

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

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

贝塞尔曲线

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

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

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

发表评论

表情：
评论列表 （有 0 条评论，927人围观）

还没有评论，来说两句吧...

相关阅读

    相关 mfc绘制曲线

    自带库绘制 用mfc自带的绘图函数绘制一个sin曲线，可以说是非常费力和傻了，基于对话框程序在onPaint()函数中添加绘制代码。效果也并不是很好。 void

    素颜马尾好姑娘i素颜马尾好姑娘i/ 0 赞/ 431 阅读