用javascript canvas 画贝塞尔曲线，求高手帮助，急求！！！！！

qq_36549402 2018-04-09 10:48:42

希望大神出手相救，研究生导师下派的任务，我真是没有读明白，希望大神帮忙解答一下第一个和第二个函数的原理，感谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
#canvasId { border: #6666ff 1px solid; position: absolute; top:60px; left:10px; }
#text { width: 600px; }
</style>
</head>
<body>
<input type="text" id="text" />
<input type="button" value="播放动画" onclick="run()" /><br />
说明：鼠标拖拽画布上的点可移动，双击画布空白处增加新的点，双击画布上的点可将其删除
<canvas id="canvasId" width="700" height="600"></canvas> //设置一个高600，宽700的画布
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var cxt = canvas.getContext("2d");
var p = [{x:43,y:131},{x:257,y:307},{x:237,y:27},{x:455,y:210}];
var clearTimer;
var bnp;

function curve(p,lt)//贝塞尔曲线
{
var sx=0, sy=0, s=p.length-1;
var q = [];
for(var i=0, l = p.length-2; i<l; ++i)
{
q[i] = {
x: (p[i+1].x - p[i].x) * s - sx ,
y: (p[i+1].y - p[i].y) * s - sy
};
sx += q[i].x;
sy += q[i].y;
}
q[i] = {
x: p[i+1].x - p[0].x - sx ,
y: p[i+1].y - p[0].y - sy
};
sx=sy=s=i=l=undefined;
return function(t)
{
t /= lt;
var x=0, y=0;
for(var i=q.length-1; i>=0; --i)
{
x = (x + q[i].x) * t;
y = (y + q[i].y) * t;
}
return {x: x+p[0].x , y: y+p[0].y};
};
}

function upg()
{
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.strokeStyle = "#bcbcbc";
cxt.lineWidth = 1;
cxt.beginPath();
for(var i=0, l = p.length; i<l; ++i)
{
var u = p[i];
cxt.lineTo(u.x, u.y);
}
cxt.stroke();
var cur = curve(p,100);
cxt.strokeStyle = "#ff0000";
cxt.lineWidth = 3;
cxt.beginPath();
for(var i=0; i<=100; i++)
{
u = cur(i);
cxt.lineTo(u.x, u.y);
}
cxt.stroke();
for(var i=0, l = p.length; i<l; ++i)
{
u = p[i];
cxt.fillStyle = u===bnp?"#c8660d":"#5b6ff0";
cxt.beginPath();
cxt.arc(u.x, u.y,6,0,2*Math.PI,true); //以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度(用弧度表示)分别为startAngle和endAngle。最后一个参数表示startAngle和endAngle是否按逆时针方向计算，值为false表示按顺时针方向计算。
cxt.closePath();
cxt.fill();
}
}

function run()
{
clearTimeout(clearTimer);
var cur = curve(p,100);
cxt.strokeStyle = "#ff0000";
cxt.lineWidth = 1;
cxt.fillStyle = "#7122b7";
function eyg(t)
{
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.beginPath();
for(var i=0; i<=100; i++)
{
var u = cur(i);
cxt.lineTo(u.x, u.y);
}
cxt.stroke();
var u = cur(t);
cxt.beginPath();
cxt.arc(u.x, u.y,8,0,2*Math.PI,true);
cxt.closePath();
cxt.fill();
if(++t<=100)
clearTimer = setTimeout(function(){eyg(t)},50);
else
upg();
}
eyg(0);
}

function distance(a,b)
{
var x = b.x-a.x , y = b.y-a.y;
return Math.sqrt(x*x+y*y);
}

function getXY(e)
{
return {
x : e.clientX - canvas.offsetLeft + document.body.scrollLeft,
y : e.clientY - canvas.offsetTop + document.body.scrollTop
}
}

function select(sp)
{
for(var i=0, l = p.length; i<l; ++i)
if(distance(sp,p[i])<=6)
return i;
return -1;
};

function uptext()
{
var arr = [];
for(var i=0, l = p.length; i<l; ++i)
arr[i] = "{x:"+p[i].x+",y:"+p[i].y+"}";
document.getElementById("text").value = "["+arr.join(",")+"]";
}

canvas.onmousedown=function(e)
{
e = e||event;
var sp = getXY(e);
var gr = select(sp);
bnp = gr!=-1 ? p[gr] : null;
};

canvas.onmousemove=function(e)
{
if(!bnp) return;
e = e||event;
var sp = getXY(e);
bnp.x = sp.x;
bnp.y = sp.y;
uptext();
upg();
};

canvas.onmouseup=function(e)
{
bnp = null;
};

canvas.ondblclick=function(e)
{
e = e||event;
var sp = getXY(e);
var gr = select(sp);
if(gr==-1)
p.push(sp);
else
{
if(p.length>2)
p.splice(gr,1);
else
alert("一条线不能少于 2 个点吧");
}
uptext();
upg();
};

canvas.onselectstart=canvas.ondragstart=function(e){return false;};

uptext();
upg();

</script>
</body>
</html>

...全文