如何使用 JavaScript 通过多个点绘制平滑曲线？

绘制具有多个点的平滑曲线是一项具有挑战性的任务。有许多算法可以帮助我们使用特定点绘制曲线。贝塞尔曲线是曲线绘制技术中的一种。关于如何使用 JavaScript 通过多个点绘制平滑曲线总是有很多讨论。因此，我们可以通过多个点绘制平滑曲线。

为了画一条线，我们应该有一条线的斜率。所以在这里我们通过取 x 和 y 的多个输入来计算一条线的斜率。为了绘制平滑曲线，我们应该有多个输入/点，我们可以通过这些输入/点来绘制平滑曲线。在这里，我们试图获得一个随机数，并试图为其绘制一条平滑的曲线。

在这里，我们给您一些关于使用多个点绘制平滑曲线的想法。请仔细阅读此代码，我们将进一步解释。

例子：

  

    
        Smooth Curve
    
      
     
        #GFG { 
            border: 2px solid black; 
        } 
        h1{ 
            color: green; 
        } 
     

  

    
        GeeksforGeeks 
      
        
        
    
      
    
        var cv = document.getElementById("GFG");
        var ctx = cv.getContext("2d");
      
        function gradient(a, b) {
            return (b.y-a.y)/(b.x-a.x);
        }
      
        function bzCurve(points, f, t) {
            if (typeof(f) == 'undefined') f = 0.3;
            if (typeof(t) == 'undefined') t = 0.6;
          
            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
          
            var m = 0;
            var dx1 = 0;
            var dy1 = 0;
      
            var preP = points[0];
      
            for (var i = 1; i < points.length; i++) {
                var curP = points[i];
                nexP = points[i + 1];
                if (nexP) {
                    m = gradient(preP, nexP);
                    dx2 = (nexP.x - curP.x) * -f;
                    dy2 = dx2 * m * t;
                } else {
                    dx2 = 0;
                    dy2 = 0;
                }
                  
                ctx.bezierCurveTo(
                    preP.x - dx1, preP.y - dy1,
                    curP.x + dx2, curP.y + dy2,
                    curP.x, curP.y
                );
              
                dx1 = dx2;
                dy1 = dy2;
                preP = curP;
            }
            ctx.stroke();
        }
  
        // Generate random data 
        var lines = [];     
        var X = 10;
        var t = 40; // control the width of X.
        for (var i = 0; i < 100; i++ ) {
            Y = Math.floor((Math.random() * 300) + 50);
            p = { x: X, y: Y };
            lines.push(p);
            X = X + t;
        }
  
        // Draw smooth line 
        ctx.setLineDash([0]);
        ctx.lineWidth = 2;
        ctx.strokeStyle = "green";
        bzCurve(lines, 0.3, 1);
     

  

输出：

解释：当我们运行这个程序时，每次它都会接受随机输入，这就是为什么它在每次执行时都会生成一条新的平滑曲线。

• 先决条件：HTML Canvas 基础
• 使用 DOM 概念将画布对象的引用存储在变量“cv”中。
• 如果没有画布的绘制上下文，则无法在其上绘制任何内容。

  var cv = document.getElementById("GFG");
          var ctx = cv.getContext("2d");
  

• 返回直线斜率的梯度函数。

  function gradient(a, b) {
              return (b.y-a.y)/(b.x-a.x);
          }

• BeginPath 方法用于启动或重置路径。
• MoveTo 方法用于将路径移动到画布中的指定点。

  ctx.beginPath();
          ctx.moveTo(points[0].x, points[0].y);
  

• Stroke 用于绘制您使用所有这些方法定义的路径。

  ctx.stroke();