JS贝赛尔曲线

JS贝赛尔曲线实现无限添加新的节点。 上代码做个笔记

ctx.beginPath();
ctx.strokeStyle = “#f00”;
ctx.lineWidth = 3;
var oX,oY,py = 0, zX,zY, sX,sY;
var flag = false;

var scale = 0.1;
var datas = [];
function draw(sx,sy,ex,ey){
canvas.height=canvas.height;
datas.push({x:ex,y:ey});

if(datas.length<=2)
{
 
 ctx.beginPath();
 ctx.arc(datas[0].x,datas[0].y,20,0,2*Math.PI);
 ctx.stroke();
 ctx.beginPath();
 ctx.moveTo(sx,sy); 
 ctx.lineTo(ex,ey); 
 ctx.stroke();
}
else
{
                ctx.beginPath();
 ctx.moveTo(sx,sy); 
 for(var i = 0 ; i <datas.length;i++)
 {
                    var pos = datas[i];
  if(i<1)
                    {
                        continue;
                    } 
  
  var last1X = datas[i-1].x;
   last1Y =  datas[i-1].y;
   //前一个点坐标
   last2X = datas[i-2] ? datas[i-2].x:0;
   last2Y = datas[i-2] ? datas[i-2].y:0;
   //前两个点坐标
   nowX =  datas[i].x,
   nowY =  datas[i].y,
   //当期点坐标
   nextX = datas[i+1]? datas[i+1].x:0,
   nextY =  datas[i+1]? datas[i+1].y:0,
   //下一个点坐标
   cAx = last1X + (nowX - last2X) * scale,
   cAy = last1Y + (nowY - last2Y) * scale,
   cBx = nowX - (nextX - last1X) * scale,
   cBy = nowY - (nextY - last1Y) * scale;
   
                        if(i === datas.length-1) {
                            cBx = nowX - (nowX - last1X) * scale
                            cBy = nowY - (nowY - last1Y) * scale
                        }

   qx=((3*cAx-nowX))/(2);
    qy=((3*cAy-nowY))/(2);

   ctx.quadraticCurveTo(qx,qy,nowX,nowY);

                        // ctx.bezierCurveTo(cAx, cAy, cBx, cBy, nowX, nowY);

                        ctx.stroke();
    
 }
                for(var i = 0 ; i <datas.length;i++)
                {
                    if(i<datas.length-1)
                    {
                        var pos = datas[i];
                        ctx.beginPath();
                        ctx.arc(pos.x,pos.y,20,0,2*Math.PI);
                        ctx.stroke();
                    }
                }
}

datas.pop();

}
canvas.onmousemove = function(e){
if(flag){
draw(oX,oY,e.pageX,e.pageY);
}
}
canvas.onclick = function(e){
if(!flag){
oX = e.pageX;
oY = e.pageY;
flag = true;
}
datas.push({x:e.pageX,y:e.pageY})
}

    });





</script>