贝塞尔曲线详细讲解，如何用 Canvas 绘制三阶贝塞尔曲线？

爱吃玉米的螃蟹

于 2024-10-10 10:50:40 发布

阅读量198

点赞数 6

文章标签：前端 javascript 开发语言 canva可画

本文链接：https://blog.csdn.net/maliao5/article/details/142599745

版权

比如我们要画一个这样的曲线，我们该怎么画了

两个点Y轴一样高，起点：（200,100）终点：（300，100）中间的弧度怎么弄了？

  <canvas id="c1" width="600" height="400"></canvas>

    <script>
      // 1. 找到画布
      var c1 = document.getElementById("c1");

      // 判断是否有getContext
      if (!c1.getContext) {
        console.log("当前浏览器不支持canvas，请下载最新的浏览器");
      }
      // 2. 获取画笔，上下文对象
      var ctx = c1.getContext("2d");

      ctx.beginPath();
      // 起点
      ctx.moveTo(200,100)
      //终点
      var zh=[300,100]
      //控制点1的（190,50）也是按照横纵坐标
      //控制点2（280,70）也是按照横纵坐标
      ctx.bezierCurveTo(190,50,280,70,zh[0],zh[1]);

      ctx.stroke();

      ctx.closePath();
    </script>

ctx.bezierCurveTo(190,50,280,70,zh[0],zh[1]);
一共6个参数，起那两个为控制点横纵坐标，最后两个参数为终点的横纵坐标。中间控制点可以不止两个

这样就出现了，不像的话可以详细调整数值。

<canvas id="c1" width="600" height="400"></canvas>

    <script>
      // 1. 找到画布
      var c1 = document.getElementById("c1");

      // 判断是否有getContext
      if (!c1.getContext) {
        console.log("当前浏览器不支持canvas，请下载最新的浏览器");
      }
      // 2. 获取画笔，上下文对象
      var ctx = c1.getContext("2d");

      ctx.beginPath();
      // 起点
      ctx.moveTo(200,100)
      //终点
      var zh=[300,100]
      //控制点1的（190,50）也是按照横纵坐标
      //控制点2（280,70）也是按照横纵坐标
      ctx.bezierCurveTo(190,50,280,70,200,150);
      // 第二个起点
      ctx.moveTo(200,150)
      ctx.bezierCurveTo(120,70,210,50,200,100);

      ctx.stroke();

      ctx.closePath();
    </script>