如何使用javascript HTML5 canvas通过N个点绘制平滑曲线？

Question

对于绘图应用程序，我将鼠标移动坐标保存到数组中，然后使用 lineTo 绘制它们。生成的线条并不平滑。如何在所有收集的点之间生成一条曲线？

我用 google 搜索过，但只找到了 3 个绘制线条的函数：对于 2 个样本点，只需使用 lineTo 即可。对于 3 个采样点，quadraticCurveTo，对于 4 个采样点，bezierCurveTo。

（我尝试为数组中的每 4 个点绘制一个 bezierCurveTo ，但这会导致每 4 个样本点扭结，而不是连续的平滑曲线。）

如何编写一个函数来绘制平滑曲线具有 5 个或更多采样点？

Answer 1

将后续样本点与不相交的“curveTo”类型函数连接在一起的问题是曲线相交的地方不平滑。这是因为两条曲线共享一个端点，但受到完全不相交的控制点的影响。一种解决方案是“曲线到”接下来的 2 个后续采样点之间的中点。使用这些新的插值点连接曲线可以在端点处实现平滑过渡（一次迭代的终点将成为下一次迭代的控制点。）换句话说，两条不相交的曲线有现在有更多共同点。

该解决方案摘自《Foundation ActionScript 3.0 Animation: Making things move》一书。 p.95 - 渲染技术：创建多条曲线。

注意：此解决方案实际上并没有绘制每个点，这是我的问题的标题（而是通过样本点近似曲线，但从未经过样本点），但出于我的目的（绘图应用程序），这对我来说已经足够好了，从视觉上你无法分辨出区别。有一个解决方案可以遍历所有样本点，但它要复杂得多（请参阅http://www.cartogrammar.com/blog/actionscript-curves-update/)

这是近似方法的绘图代码：

// move to the first point
   ctx.moveTo(points[0].x, points[0].y);


   for (var i = 1; i < points.length - 2; i++)
   {
      var xc = (points[i].x + points[i + 1].x) / 2;
      var yc = (points[i].y + points[i + 1].y) / 2;
      ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
   }
 // curve through the last two points
 ctx.quadraticCurveTo(points[i].x, points[i].y, points[i+1].x,points[i+1].y);

作为可运行的代码片段：

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const points = [
  {x: 50, y: 50},
  {x: 180, y: 100},
  {x: 75, y: 120},
  {x: 40, y: 40},
];

// move to the first point
ctx.moveTo(points[0].x, points[0].y);

for (var i = 1; i < points.length - 2; i++) {
  var xc = (points[i].x + points[i + 1].x) / 2;
  var yc = (points[i].y + points[i + 1].y) / 2;
  ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
}

// curve through the last two points
ctx.quadraticCurveTo(
  points[i].x,
  points[i].y,
  points[i + 1].x,
  points[i + 1].y
);
ctx.stroke();

<canvas width="600" height="600"></canvas>

Answer 2

有点晚了，但为了记录。

您可以通过使用基数样条（又名规范样条）绘制平滑曲线来实现平滑线条这贯穿了要点。

我为画布制作了这个功能 - 它分为三个功能以增加多功能性。主要包装函数如下所示：

function drawCurve(ctx, ptsa, tension, isClosed, numOfSegments, showPoints) {

  ctx.beginPath();

  drawLines(ctx, getCurvePoints(ptsa, tension, isClosed, numOfSegments));
  
  if (showPoints) {
    ctx.beginPath();
    for(var i=0;i<ptsa.length-1;i+=2) 
      ctx.rect(ptsa[i] - 2, ptsa[i+1] - 2, 4, 4);
  }

  ctx.stroke();
}

要绘制曲线，请使用一个包含 x、y 点的数组，顺序为：x1,y1, x2,y2, ...xn,yn。

像这样使用它：

var myPoints = [10,10, 40,30, 100,10]; //minimum two points
var tension = 1;

drawCurve(ctx, myPoints); //default tension=0.5
drawCurve(ctx, myPoints, tension);

上面的函数调用两个子函数，一个用于计算平滑点。这将返回一个包含新点的数组 - 这是计算平滑点的核心函数：

function getCurvePoints(pts, tension, isClosed, numOfSegments) {

    // use input value if provided, or use a default value   
    tension = (typeof tension != 'undefined') ? tension : 0.5;
    isClosed = isClosed ? isClosed : false;
    numOfSegments = numOfSegments ? numOfSegments : 16;

    var _pts = [], res = [],    // clone array
        x, y,           // our x,y coords
        t1x, t2x, t1y, t2y, // tension vectors
        c1, c2, c3, c4,     // cardinal points
        st, t, i;       // steps based on num. of segments

    // clone array so we don't change the original
    //
    _pts = pts.slice(0);

    // The algorithm require a previous and next point to the actual point array.
    // Check if we will draw closed or open curve.
    // If closed, copy end points to beginning and first points to end
    // If open, duplicate first points to befinning, end points to end
    if (isClosed) {
        _pts.unshift(pts[pts.length - 1]);
        _pts.unshift(pts[pts.length - 2]);
        _pts.unshift(pts[pts.length - 1]);
        _pts.unshift(pts[pts.length - 2]);
        _pts.push(pts[0]);
        _pts.push(pts[1]);
    }
    else {
        _pts.unshift(pts[1]);   //copy 1. point and insert at beginning
        _pts.unshift(pts[0]);
        _pts.push(pts[pts.length - 2]); //copy last point and append
        _pts.push(pts[pts.length - 1]);
    }

    // ok, lets start..
    
    // 1. loop goes through point array
    // 2. loop goes through each segment between the 2 pts + 1e point before and after
    for (i=2; i < (_pts.length - 4); i+=2) {
        for (t=0; t <= numOfSegments; t++) {

            // calc tension vectors
            t1x = (_pts[i+2] - _pts[i-2]) * tension;
            t2x = (_pts[i+4] - _pts[i]) * tension;
    
            t1y = (_pts[i+3] - _pts[i-1]) * tension;
            t2y = (_pts[i+5] - _pts[i+1]) * tension;

            // calc step
            st = t / numOfSegments;
        
            // calc cardinals
            c1 =   2 * Math.pow(st, 3)  - 3 * Math.pow(st, 2) + 1; 
            c2 = -(2 * Math.pow(st, 3)) + 3 * Math.pow(st, 2); 
            c3 =       Math.pow(st, 3)  - 2 * Math.pow(st, 2) + st; 
            c4 =       Math.pow(st, 3)  -     Math.pow(st, 2);

            // calc x and y cords with common control vectors
            x = c1 * _pts[i]    + c2 * _pts[i+2] + c3 * t1x + c4 * t2x;
            y = c1 * _pts[i+1]  + c2 * _pts[i+3] + c3 * t1y + c4 * t2y;
        
            //store points in array
            res.push(x);
            res.push(y);

        }
    }
    
    return res;
}

并实际将点绘制为平滑曲线（或任何其他分段线，只要您有 x,y 数组）：

function drawLines(ctx, pts) {
    ctx.moveTo(pts[0], pts[1]);
    for(i=2;i<pts.length-1;i+=2) ctx.lineTo(pts[i], pts[i+1]);
}

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


function drawCurve(ctx, ptsa, tension, isClosed, numOfSegments, showPoints) {

  ctx.beginPath();

  drawLines(ctx, getCurvePoints(ptsa, tension, isClosed, numOfSegments));
  
  if (showPoints) {
    ctx.beginPath();
    for(var i=0;i<ptsa.length-1;i+=2) 
      ctx.rect(ptsa[i] - 2, ptsa[i+1] - 2, 4, 4);
  }

  ctx.stroke();
}


var myPoints = [10,10, 40,30, 100,10, 200, 100, 200, 50, 250, 120]; //minimum two points
var tension = 1;

drawCurve(ctx, myPoints); //default tension=0.5
drawCurve(ctx, myPoints, tension);


function getCurvePoints(pts, tension, isClosed, numOfSegments) {

  // use input value if provided, or use a default value     
  tension = (typeof tension != 'undefined') ? tension : 0.5;
  isClosed = isClosed ? isClosed : false;
  numOfSegments = numOfSegments ? numOfSegments : 16;

  var _pts = [], res = [],  // clone array
      x, y,         // our x,y coords
      t1x, t2x, t1y, t2y,   // tension vectors
      c1, c2, c3, c4,       // cardinal points
      st, t, i;     // steps based on num. of segments

  // clone array so we don't change the original
  //
  _pts = pts.slice(0);

  // The algorithm require a previous and next point to the actual point array.
  // Check if we will draw closed or open curve.
  // If closed, copy end points to beginning and first points to end
  // If open, duplicate first points to befinning, end points to end
  if (isClosed) {
    _pts.unshift(pts[pts.length - 1]);
    _pts.unshift(pts[pts.length - 2]);
    _pts.unshift(pts[pts.length - 1]);
    _pts.unshift(pts[pts.length - 2]);
    _pts.push(pts[0]);
    _pts.push(pts[1]);
  }
  else {
    _pts.unshift(pts[1]);   //copy 1. point and insert at beginning
    _pts.unshift(pts[0]);
    _pts.push(pts[pts.length - 2]); //copy last point and append
    _pts.push(pts[pts.length - 1]);
  }

  // ok, lets start..

  // 1. loop goes through point array
  // 2. loop goes through each segment between the 2 pts + 1e point before and after
  for (i=2; i < (_pts.length - 4); i+=2) {
    for (t=0; t <= numOfSegments; t++) {

      // calc tension vectors
      t1x = (_pts[i+2] - _pts[i-2]) * tension;
      t2x = (_pts[i+4] - _pts[i]) * tension;

      t1y = (_pts[i+3] - _pts[i-1]) * tension;
      t2y = (_pts[i+5] - _pts[i+1]) * tension;

      // calc step
      st = t / numOfSegments;

      // calc cardinals
      c1 =   2 * Math.pow(st, 3)    - 3 * Math.pow(st, 2) + 1; 
      c2 = -(2 * Math.pow(st, 3)) + 3 * Math.pow(st, 2); 
      c3 =     Math.pow(st, 3)  - 2 * Math.pow(st, 2) + st; 
      c4 =     Math.pow(st, 3)  -     Math.pow(st, 2);

      // calc x and y cords with common control vectors
      x = c1 * _pts[i]  + c2 * _pts[i+2] + c3 * t1x + c4 * t2x;
      y = c1 * _pts[i+1]    + c2 * _pts[i+3] + c3 * t1y + c4 * t2y;

      //store points in array
      res.push(x);
      res.push(y);

    }
  }

  return res;
}

function drawLines(ctx, pts) {
  ctx.moveTo(pts[0], pts[1]);
  for(i=2;i<pts.length-1;i+=2) ctx.lineTo(pts[i], pts[i+1]);
}

canvas { border: 1px solid red; }

<canvas id="c"><canvas>

结果如下：

您可以轻松扩展画布，这样您就可以像这样调用它：

ctx.drawCurve(myPoints);

将以下内容添加到javascript：

if (CanvasRenderingContext2D != 'undefined') {
    CanvasRenderingContext2D.prototype.drawCurve = 
        function(pts, tension, isClosed, numOfSegments, showPoints) {
       drawCurve(this, pts, tension, isClosed, numOfSegments, showPoints)}
}

您可以在 NPM (npm i cardinal-spline-js) 或 GitLab。

Answer 3

第一个答案不会贯穿所有要点。该图将精确地通过所有点，并且将是一条完美的曲线，其中点为 [{x:,y:}] n 个这样的点。

var points = [{x:1,y:1},{x:2,y:3},{x:3,y:4},{x:4,y:2},{x:5,y:6}] //took 5 example points
ctx.moveTo((points[0].x), points[0].y);

for(var i = 0; i < points.length-1; i ++)
{

  var x_mid = (points[i].x + points[i+1].x) / 2;
  var y_mid = (points[i].y + points[i+1].y) / 2;
  var cp_x1 = (x_mid + points[i].x) / 2;
  var cp_x2 = (x_mid + points[i+1].x) / 2;
  ctx.quadraticCurveTo(cp_x1,points[i].y ,x_mid, y_mid);
  ctx.quadraticCurveTo(cp_x2,points[i+1].y ,points[i+1].x,points[i+1].y);
}

Answer 4

我决定添加，而不是将我的解决方案发布到另一篇文章中。
以下是我构建的解决方案，可能并不完美，但到目前为止输出还不错。

重要：它将穿过所有点！

如果您有任何想法，让它变得更好，请分享给我。谢谢。

以下是前后对比：

将此代码保存到 HTML 以进行测试。

    <!DOCTYPE html>
    <html>
    <body>
    	<canvas id="myCanvas" width="1200" height="700" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
    	<script>
    		var cv = document.getElementById("myCanvas");
    		var ctx = cv.getContext("2d");
    
    		function gradient(a, b) {
    			return (b.y-a.y)/(b.x-a.x);
    		}
    
    		function bzCurve(points, f, t) {
    			//f = 0, will be straight line
    			//t suppose to be 1, but changing the value can control the smoothness too
    			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; //to control 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 straight line
    		ctx.beginPath();
    		ctx.setLineDash([5]);
    		ctx.lineWidth = 1;
    		bzCurve(lines, 0, 1);
    
    		//draw smooth line
    		ctx.setLineDash([0]);
    		ctx.lineWidth = 2;
    		ctx.strokeStyle = "blue";
    		bzCurve(lines, 0.3, 1);
    	</script>
    </body>
    </html>

Answer 5

正如 Daniel Howard 指出，Rob Spencer 在 http://scaledinnovation.com/analytics/splines/aboutSplines.html。

这是一个交互式演示： http://jsbin.com/ApitIxo/2/

这里它是以防 jsbin 关闭的代码片段。

<!DOCTYPE html>
    <html>
      <head>
        <meta charset=utf-8 />
        <title>Demo smooth connection</title>
      </head>
      <body>
        <div id="display">
          Click to build a smooth path. 
          (See Rob Spencer's <a href="http://scaledinnovation.com/analytics/splines/aboutSplines.html">article</a>)
          <br><label><input type="checkbox" id="showPoints" checked> Show points</label>
          <br><label><input type="checkbox" id="showControlLines" checked> Show control lines</label>
          <br>
          <label>
            <input type="range" id="tension" min="-1" max="2" step=".1" value=".5" > Tension <span id="tensionvalue">(0.5)</span>
          </label>
        <div id="mouse"></div>
        </div>
        <canvas id="canvas"></canvas>
        <style>
          html { position: relative; height: 100%; width: 100%; }
          body { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } 
          canvas { outline: 1px solid red; }
          #display { position: fixed; margin: 8px; background: white; z-index: 1; }
        </style>
        <script>
          function update() {
            $("tensionvalue").innerHTML="("+$("tension").value+")";
            drawSplines();
          }
          $("showPoints").onchange = $("showControlLines").onchange = $("tension").onchange = update;
      
          // utility function
          function $(id){ return document.getElementById(id); }
          var canvas=$("canvas"), ctx=canvas.getContext("2d");

          function setCanvasSize() {
            canvas.width = parseInt(window.getComputedStyle(document.body).width);
            canvas.height = parseInt(window.getComputedStyle(document.body).height);
          }
          window.onload = window.onresize = setCanvasSize();
      
          function mousePositionOnCanvas(e) {
            var el=e.target, c=el;
            var scaleX = c.width/c.offsetWidth || 1;
            var scaleY = c.height/c.offsetHeight || 1;
          
            if (!isNaN(e.offsetX)) 
              return { x:e.offsetX*scaleX, y:e.offsetY*scaleY };
          
            var x=e.pageX, y=e.pageY;
            do {
              x -= el.offsetLeft;
              y -= el.offsetTop;
              el = el.offsetParent;
            } while (el);
            return { x: x*scaleX, y: y*scaleY };
          }
      
          canvas.onclick = function(e){
            var p = mousePositionOnCanvas(e);
            addSplinePoint(p.x, p.y);
          };
      
          function drawPoint(x,y,color){
            ctx.save();
            ctx.fillStyle=color;
            ctx.beginPath();
            ctx.arc(x,y,3,0,2*Math.PI);
            ctx.fill()
            ctx.restore();
          }
          canvas.onmousemove = function(e) {
            var p = mousePositionOnCanvas(e);
            $("mouse").innerHTML = p.x+","+p.y;
          };
      
          var pts=[]; // a list of x and ys

          // given an array of x,y's, return distance between any two,
          // note that i and j are indexes to the points, not directly into the array.
          function dista(arr, i, j) {
            return Math.sqrt(Math.pow(arr[2*i]-arr[2*j], 2) + Math.pow(arr[2*i+1]-arr[2*j+1], 2));
          }

          // return vector from i to j where i and j are indexes pointing into an array of points.
          function va(arr, i, j){
            return [arr[2*j]-arr[2*i], arr[2*j+1]-arr[2*i+1]]
          }
      
          function ctlpts(x1,y1,x2,y2,x3,y3) {
            var t = $("tension").value;
            var v = va(arguments, 0, 2);
            var d01 = dista(arguments, 0, 1);
            var d12 = dista(arguments, 1, 2);
            var d012 = d01 + d12;
            return [x2 - v[0] * t * d01 / d012, y2 - v[1] * t * d01 / d012,
                    x2 + v[0] * t * d12 / d012, y2 + v[1] * t * d12 / d012 ];
          }

          function addSplinePoint(x, y){
            pts.push(x); pts.push(y);
            drawSplines();
          }
          function drawSplines() {
            clear();
            cps = []; // There will be two control points for each "middle" point, 1 ... len-2e
            for (var i = 0; i < pts.length - 2; i += 1) {
              cps = cps.concat(ctlpts(pts[2*i], pts[2*i+1], 
                                      pts[2*i+2], pts[2*i+3], 
                                      pts[2*i+4], pts[2*i+5]));
            }
            if ($("showControlLines").checked) drawControlPoints(cps);
            if ($("showPoints").checked) drawPoints(pts);
    
            drawCurvedPath(cps, pts);
 
          }
          function drawControlPoints(cps) {
            for (var i = 0; i < cps.length; i += 4) {
              showPt(cps[i], cps[i+1], "pink");
              showPt(cps[i+2], cps[i+3], "pink");
              drawLine(cps[i], cps[i+1], cps[i+2], cps[i+3], "pink");
            } 
          }
      
          function drawPoints(pts) {
            for (var i = 0; i < pts.length; i += 2) {
              showPt(pts[i], pts[i+1], "black");
            } 
          }
      
          function drawCurvedPath(cps, pts){
            var len = pts.length / 2; // number of points
            if (len < 2) return;
            if (len == 2) {
              ctx.beginPath();
              ctx.moveTo(pts[0], pts[1]);
              ctx.lineTo(pts[2], pts[3]);
              ctx.stroke();
            }
            else {
              ctx.beginPath();
              ctx.moveTo(pts[0], pts[1]);
              // from point 0 to point 1 is a quadratic
              ctx.quadraticCurveTo(cps[0], cps[1], pts[2], pts[3]);
              // for all middle points, connect with bezier
              for (var i = 2; i < len-1; i += 1) {
                // console.log("to", pts[2*i], pts[2*i+1]);
                ctx.bezierCurveTo(
                  cps[(2*(i-1)-1)*2], cps[(2*(i-1)-1)*2+1],
                  cps[(2*(i-1))*2], cps[(2*(i-1))*2+1],
                  pts[i*2], pts[i*2+1]);
              }
              ctx.quadraticCurveTo(
                cps[(2*(i-1)-1)*2], cps[(2*(i-1)-1)*2+1],
                pts[i*2], pts[i*2+1]);
              ctx.stroke();
            }
          }
          function clear() {
            ctx.save();
            // use alpha to fade out
            ctx.fillStyle = "rgba(255,255,255,.7)"; // clear screen
            ctx.fillRect(0,0,canvas.width,canvas.height);
            ctx.restore();
          }
      
          function showPt(x,y,fillStyle) {
            ctx.save();
            ctx.beginPath();
            if (fillStyle) {
              ctx.fillStyle = fillStyle;
            }
            ctx.arc(x, y, 5, 0, 2*Math.PI);
            ctx.fill();
            ctx.restore();
          }

          function drawLine(x1, y1, x2, y2, strokeStyle){
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            if (strokeStyle) {
              ctx.save();
              ctx.strokeStyle = strokeStyle;
              ctx.stroke();
              ctx.restore();
            }
            else {
              ctx.save();
              ctx.strokeStyle = "pink";
              ctx.stroke();
              ctx.restore();
            }
          }

        </script>


      </body>
    </html>

Answer 6

我发现这个效果很好

function drawCurve(points, tension) {
    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);

    var t = (tension != null) ? tension : 1;
    for (var i = 0; i < points.length - 1; i++) {
        var p0 = (i > 0) ? points[i - 1] : points[0];
        var p1 = points[i];
        var p2 = points[i + 1];
        var p3 = (i != points.length - 2) ? points[i + 2] : p2;

        var cp1x = p1.x + (p2.x - p0.x) / 6 * t;
        var cp1y = p1.y + (p2.y - p0.y) / 6 * t;

        var cp2x = p2.x - (p3.x - p1.x) / 6 * t;
        var cp2y = p2.y - (p3.y - p1.y) / 6 * t;

        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
    }
    ctx.stroke();
}

Answer 7

尝试一下 KineticJS - 您可以使用点数组定义样条线。这是一个示例：

旧网址：http://www.html5canvastutorials。 com/kineticjs/html5-canvas-kineticjs-spline-tutorial/

查看存档网址：https://web.archive.org/web/20141204030628/http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-spline-tutorial/

Answer 8

Bonjour

我很欣赏 user1693593 的解决方案：Hermite 多项式似乎是控制绘制内容的最佳方法，从数学的角度来看也是最令人满意的。
这个话题似乎已经被关闭了很长时间，但可能像我这样的后来者仍然对此感兴趣。
我一直在寻找一个免费的交互式绘图生成器，它可以让我存储曲线并在其他地方重复使用它，但在网络上没有找到这种东西：所以我用自己的方式从维基百科制作了它用户1693593提到的来源。
很难解释它是如何在这里工作的，了解它是否值得的最好方法是查看 https://sites.google.com/view/divertissements/accueil/splines。

Answer 9

令人难以置信的迟到，但受到 Homan 极其简单的答案的启发，请允许我发布一个更通用的解决方案（通用是指 Homan 的解决方案在少于 3 个顶点的点数组上崩溃）：

function smooth(ctx, points)
{
    if(points == undefined || points.length == 0)
    {
        return true;
    }
    if(points.length == 1)
    {
        ctx.moveTo(points[0].x, points[0].y);
        ctx.lineTo(points[0].x, points[0].y);
        return true;
    }
    if(points.length == 2)
    {
        ctx.moveTo(points[0].x, points[0].y);
        ctx.lineTo(points[1].x, points[1].y);
        return true;
    }
    ctx.moveTo(points[0].x, points[0].y);
    for (var i = 1; i < points.length - 2; i ++)
    {
        var xc = (points[i].x + points[i + 1].x) / 2;
        var yc = (points[i].y + points[i + 1].y) / 2;
        ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
    }
    ctx.quadraticCurveTo(points[i].x, points[i].y, points[i+1].x, points[i+1].y);
}

Answer 10

这段代码对我来说是完美的：

this.context.beginPath();
this.context.moveTo(data[0].x, data[0].y);
for (let i = 1; i < data.length; i++) {
  this.context.bezierCurveTo(
    data[i - 1].x + (data[i].x - data[i - 1].x) / 2,
    data[i - 1].y,
    data[i - 1].x + (data[i].x - data[i - 1].x) / 2,
    data[i].y,
    data[i].x,
    data[i].y);
}

你有正确的平滑线和正确的端点
注意！ (y = "画布高度" - y);

Answer 11

与原始问题的答案略有不同；

如果有人想要绘制一个形状：

• 由一系列点描述
• ，其中线在这些点处有一个小曲线，
• 则线不一定必须穿过这些点（即稍微穿过） “里面”，其中）

那么希望我的以下功能可以有所帮助

<!DOCTYPE html>
<html>

<body>
<canvas id="myCanvas" width="1200" height="700" style="border: 1px solid #d3d3d3">Your browser does not support the
    HTML5 canvas tag.</canvas>
<script>
    var cv = document.getElementById("myCanvas");
    var ctx = cv.getContext("2d");

    const drawPointsWithCurvedCorners = (points, ctx) => {
        for (let n = 0; n <= points.length - 1; n++) {
            let pointA = points[n];
            let pointB = points[(n + 1) % points.length];
            let pointC = points[(n + 2) % points.length];

            const midPointAB = {
                x: pointA.x + (pointB.x - pointA.x) / 2,
                y: pointA.y + (pointB.y - pointA.y) / 2,
            };
            const midPointBC = {
                x: pointB.x + (pointC.x - pointB.x) / 2,
                y: pointB.y + (pointC.y - pointB.y) / 2,
            };
            ctx.moveTo(midPointAB.x, midPointAB.y);
            ctx.arcTo(
                pointB.x,
                pointB.y,
                midPointBC.x,
                midPointBC.y,
                radii[pointB.r]
            );
            ctx.lineTo(midPointBC.x, midPointBC.y);
        }
    };

    const shapeWidth = 200;
    const shapeHeight = 150;

    const topInsetDepth = 35;
    const topInsetSideWidth = 20;
    const topInsetHorizOffset = shapeWidth * 0.25;

    const radii = {
        small: 15,
        large: 30,
    };

    const points = [
        {
            // TOP-LEFT
            x: 0,
            y: 0,
            r: "large",
        },
        {
            x: topInsetHorizOffset,
            y: 0,
            r: "small",
        },
        {
            x: topInsetHorizOffset + topInsetSideWidth,
            y: topInsetDepth,
            r: "small",
        },
        {
            x: shapeWidth - (topInsetHorizOffset + topInsetSideWidth),
            y: topInsetDepth,
            r: "small",
        },
        {
            x: shapeWidth - topInsetHorizOffset,
            y: 0,
            r: "small",
        },
        {
            // TOP-RIGHT
            x: shapeWidth,
            y: 0,
            r: "large",
        },
        {
            // BOTTOM-RIGHT
            x: shapeWidth,
            y: shapeHeight,
            r: "large",
        },
        {
            // BOTTOM-LEFT
            x: 0,
            y: shapeHeight,
            r: "large",
        },
    ];

    // ACTUAL DRAWING OF POINTS
    ctx.beginPath();
    drawPointsWithCurvedCorners(points, ctx);
    ctx.stroke();
</script>
</body>

</html>

Answer 12

我不知何故需要一种仅使用二次贝塞尔曲线的方法。这是我的方法，可以扩展到 3d：

四边形贝塞尔曲线的公式是

b(t) = (1-t)^2A + 2(1-t)tB + t^2*C

当 t = 0 或 1 时，曲线可以通过 A 点或 C 点，但不保证通过 B 点。

其一阶导数为

b'(t) = 2(t-1)A + 2(1-2t)B + 2tC

构造曲线经过点 P0,P1,P2 有两条四边贝塞尔曲线，两条贝塞尔曲线在 p1 处的斜率应相等

b'α(t) = 2(t-1)P0 + 2(1-2t)M1 + 2t P1

b'β(t) = 2(t-1)P1 + 2(1-2t)M2 + 2t P2

b'α(1) = b'β(0)

这给出

(M1 + M2) / 2 = P1

因此，可以像这样绘制经过 3 个点的曲线

bezier(p0, m1, p1);
bezier(p1, m2, p2);

其中 m1p1 = p1m2。 m1m2的方向无关紧要，可以通过p2 - p1求得。

对于通过 4 个或更多点的曲线

bezier(p0, m1, p1);
bezier(p1, m2, (m2 + m3) / 2);
bezier((m2 + m3) / 2, m3, p2);
bezier(p2, m4, p3);

，其中 m1p1 = p1m2 和 m3p2 = p2m4。

function drawCurve(ctx: CanvasRenderingContext2D, points: { x: number, y: number }[], tension = 2) {
    if (points.length < 2) {
        return;
    }
    ctx.beginPath();
    if (points.length === 2) {
        ctx.moveTo(points[0].x, points[0].y);
        ctx.lineTo(points[1].x, points[1].y);
        ctx.stroke();
        return;
    }
    let prevM2x = 0;
    let prevM2y = 0;
    for (let i = 1, len = points.length; i < len - 1; ++i) {
        const p0 = points[i - 1];
        const p1 = points[i];
        const p2 = points[i + 1];
        let tx = p2.x - (i === 1 ? p0.x : prevM2x);
        let ty = p2.y - (i === 1 ? p0.y : prevM2y);
        const tLen = Math.sqrt(tx ** 2 + ty ** 2);
        if (tLen > 1e-8) {
            const inv = 1 / tLen;
            tx *= inv;
            ty *= inv;
        } else {
            tx = 0;
            ty = 0;
        }
        const det = Math.sqrt(Math.min(
            (p0.x - p1.x) ** 2 + (p0.y - p1.y) ** 2,
            (p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2
        )) / (2 * tension);
        const m1x = p1.x - tx * det;
        const m1y = p1.y - ty * det;
        const m2x = p1.x + tx * det;
        const m2y = p1.y + ty * det;
        if (i === 1) {
            ctx.moveTo(p0.x, p0.y);
            ctx.quadraticCurveTo(m1x, m1y, p1.x, p1.y);
        } else {
            const mx = (prevM2x + m1x) / 2;
            const my = (prevM2y + m1y) / 2;
            ctx.quadraticCurveTo(prevM2x, prevM2y, mx, my);
            ctx.quadraticCurveTo(m1x, m1y, p1.x, p1.y);
        }
        if (i === len - 2) {
            ctx.quadraticCurveTo(m2x, m2y, p2.x, p2.y);
        }
        prevM2x = m2x;
        prevM2y = m2y;
    }
    ctx.stroke();
}

Answer 13

为了添加到 K3N 的基数样条方法，并可能解决 TJ Crowder 对曲线“倾斜”到误导性位置的担忧，我在 getCurvePoints() 函数中插入了以下代码，就在 res.push( x);

if ((y < _pts[i+1] && y < _pts[i+3]) || (y > _pts[i+1] && y > _pts[i+3])) {
    y = (_pts[i+1] + _pts[i+3]) / 2;
}
if ((x < _pts[i] && x < _pts[i+2]) || (x > _pts[i] && x > _pts[i+2])) {
    x = (_pts[i] + _pts[i+2]) / 2;
}

这有效地在每对连续点之间创建一个（不可见的）边界框，并确保曲线保持在该边界框内 - 即。如果曲线上的一个点位于两个点的上方/下方/左侧/右侧，则会将其位置更改为位于框内。这里使用中点，但这可以改进，也许使用线性插值。

Answer 14

如果您想通过 n 个点确定曲线方程，则以下代码将为您提供 n-1 次多项式的系数，并将这些系数保存到 coefficients[] 数组（从常数项）。 x 坐标不必按顺序排列。这是拉格朗日多项式的示例。

var xPoints=[2,4,3,6,7,10]; //example coordinates
var yPoints=[2,5,-2,0,2,8];
var coefficients=[];
for (var m=0; m<xPoints.length; m++) coefficients[m]=0;
    for (var m=0; m<xPoints.length; m++) {
        var newCoefficients=[];
        for (var nc=0; nc<xPoints.length; nc++) newCoefficients[nc]=0;
        if (m>0) {
            newCoefficients[0]=-xPoints[0]/(xPoints[m]-xPoints[0]);
            newCoefficients[1]=1/(xPoints[m]-xPoints[0]);
    } else {
        newCoefficients[0]=-xPoints[1]/(xPoints[m]-xPoints[1]);
        newCoefficients[1]=1/(xPoints[m]-xPoints[1]);
    }
    var startIndex=1; 
    if (m==0) startIndex=2; 
    for (var n=startIndex; n<xPoints.length; n++) {
        if (m==n) continue;
        for (var nc=xPoints.length-1; nc>=1; nc--) {
        newCoefficients[nc]=newCoefficients[nc]*(-xPoints[n]/(xPoints[m]-xPoints[n]))+newCoefficients[nc-1]/(xPoints[m]-xPoints[n]);
        }
        newCoefficients[0]=newCoefficients[0]*(-xPoints[n]/(xPoints[m]-xPoints[n]));
    }    
    for (var nc=0; nc<xPoints.length; nc++) coefficients[nc]+=yPoints[m]*newCoefficients[nc];
}