如何在没有ctx.bezierCurveTo的情况下使用本机Javascript代码绘制Bezier曲线？

我需要在没有ctx.bezierCurveTo方法的情况下使用本机Javascript绘制和获取每个步骤的bezier曲线的坐标

我找到了一些资源，但我感到困惑。特别是看起来很接近，但我无法清楚地实现

---

如何实现这一点？

您可以绘制贝塞尔曲线：

bezier = function(t, p0, p1, p2, p3){
  var cX = 3 * (p1.x - p0.x),
      bX = 3 * (p2.x - p1.x) - cX,
      aX = p3.x - p0.x - cX - bX;

  var cY = 3 * (p1.y - p0.y),
      bY = 3 * (p2.y - p1.y) - cY,
      aY = p3.y - p0.y - cY - bY;

  var x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p0.x;
  var y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p0.y;

  return {x: x, y: y};
},

(function(){
  var accuracy = 0.01, //this'll give the bezier 100 segments
      p0 = {x: 10, y: 10}, //use whatever points you want obviously
      p1 = {x: 50, y: 100},
      p2 = {x: 150, y: 200},
      p3 = {x: 200, y: 75},
      ctx = document.createElement('canvas').getContext('2d');

  ctx.width = 500;
  ctx.height = 500;
  document.body.appendChild(ctx.canvas);

  ctx.moveTo(p0.x, p0.y);
  for (var i=0; i<1; i+=accuracy){
     var p = bezier(i, p0, p1, p2, p3);
     ctx.lineTo(p.x, p.y);
  }

  ctx.stroke()
})()

贝塞尔=函数（t，p0，p1，p2，p3）{ var cX=3*（p1.x-p0.x）， bX=3*（p2.x-p1.x）-cX， aX=p3.x-p0.x-cX-bX； var cY=3*（p1.y-p0.y）， bY=3*（p2.y-p1.y）-cY， aY=p3.y-p0.y-cY-bY； var x=（aX*Math.pow（t，3））+（bX*Math.pow（t，2））+（cX*t）+p0.x； 变量y=（aY*Math.pow（t，3））+（bY*Math.pow（t，2））+（cY*t）+p0.y； 返回{x:x，y:y}； }, （功能（）{ var-accurity=0.01，//这将给出bezier 100段 p0={x:10，y:10}，//使用您想要的任何点 p1={x:50，y:100}， p2={x:150，y:200}， p3={x:200，y:75}， ctx=document.createElement（'canvas'）.getContext（'2d'）； ctx.width=500； ctx.height=500； document.body.appendChild（ctx.canvas）； ctx.moveTo（p0.x，p0.y）；

---

对于（var i=0；i，这里有一个代码示例，用于创建贝塞尔曲线所需的任意数量的点。 这里要传递的点是包含点的x和y值的对象数组。 [{x:1，y:2}，{x:3，y:4}.]

function factorial(n) {
    if(n<0)    
        return(-1); /*Wrong value*/      
    if(n==0)    
        return(1);  /*Terminating condition*/    
    else    
    {    
        return(n*factorial(n-1));        
    }
}

function nCr(n,r) {
    return( factorial(n) / ( factorial(r) * factorial(n-r) ) );
}

function BezierCurve(points) {
    let n=points.length;
    let curvepoints=[];
    for(let u=0; u <= 1 ; u += 0.0001 ){

        let p={x:0,y:0};

        for(let i=0 ; i<n ; i++){
            let B=nCr(n-1,i)*Math.pow((1-u),(n-1)-i)*Math.pow(u,i);
            let px=points[i].x*B;
            let py=points[i].y*B;
            
            p.x+=px;
            p.y+=py;
            
        }

        curvepoints.push(p);
    }
    
    return curvepoints;
}

函数阶乘（n）{
如果（这是在C语言中（使用OpenGL）实现的方法，但想法应该是一样的：@nhahdh好吧，我想我需要看看“bezierFunction”将其自身移植到JS@Hydrangea我已经编写了一个AI格式解析器，仅此而已。@Digerkam:这只是一个使用链接中公式的函数。为什么不能使用bezierCurveTo？我认为所有支持canvas的浏览器也支持bezierCurveTo。我正在制作一个JavaScript SVG路径解释器（用于，不要判断），贝塞尔曲线是必不可少的，这就是我要说的：）你能解释一下为什么Y只是控制点Y分量的函数吗？谢谢兄弟