JavaScript 如何绘制通过多个点的平滑曲线

在本文中，我们将使用JavaScript绘制通过多个点的平滑曲线。

方法： 绘制通过多个点的平滑曲线是一个具有挑战性的任务。有许多算法可以帮助我们使用特定的点来绘制曲线。贝塞尔曲线是曲线绘制技术之一。关于如何使用JavaScript绘制通过多个点的平滑曲线始终有很多讨论。所以，我们需要绘制通过多个点的平滑曲线。为了绘制一条线，我们应该有线的斜率。所以这里我们通过多个x和y的输入来计算线的斜率。为了绘制平滑曲线，我们应该有多个输入/点，通过这些输入/点我们可以绘制平滑曲线。这里我们尝试获取一个随机数，用于绘制平滑曲线。在这里，我们给出了一些关于使用多个点绘制平滑曲线的想法。请查看这段代码，我们将进一步解释。

示例： 此示例展示了上述方法的用法。

<h1 style="color:green"> 
    GeeksforGeeks 
</h1> 
  
<canvas id="GFG" width="600" height="400" 
        style="border: 2px solid black"> 
</canvas> 
  
<script> 
    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); 
</script>

输出:

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

• 先决条件：HTML Canvas基础知识
• 使用DOM概念，将canvas对象的引用存储在变量‘cv’中。
• 如果没有canvas的绘图上下文，就无法在其上绘制任何内容。

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

• 渐变函数返回线的斜率。

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

• The beginPath方法用于开始或重置路径。
• The MoveTo方法用于将路径移动到画布上的指定点。

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

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

ctx.stroke();