canvas高级贝塞尔曲线运动动画
window.addEventListener('load',eventWindowLoaded,false);functioneventWindowLoaded(){
canvasApp();
}functioncanvasSupport(){returnModernizr.canvas;
}functioncanvasApp(){if(!canvasSupport()){return;
}varpointImage= newImage();
pointImage.src="point.png";functiondrawScreen(){ //首先填充canvas的背景
context.fillStyle= '#eee'context.fillRect(0,0,theCanvas.width,theCanvas.height);//边框
context.strokeStyle= '#eee'context.strokeRect(1,1,theCanvas.width,theCanvas.height);
//在这里解释下贝塞尔曲线，看网页底部的那个点击成Canvas三次贝塞尔曲线操作实例！你就会发现一个曲线是由4个点组成的，在下面有注释vart=ball.t;varcx= 3*(p1.x-p0.x);varbx= 3*(p2.x-p1.x)-cx;varax=p3.x-p0.x-cx-bx;varcy= 3*(p1.y-p0.y);varby= 3*(p2.y-p1.y)-cy;varay=p3.y-p0.y-cy-by;varxt=ax*(t*t*t)+bx*(t*t)+cx*t+p0.x;varyt=ay*(t*t*t)+by*(t*t)+cy*t+p0.y;
//这里的xt和yt贝塞尔曲线的公式，这里涉及到一门叫做计算机图形学的学科(大学里面有上，我也最近一直在上)//0 <= t <= 1这是一个T....学过图形学的应该知道比如一根直线他的起始坐标轴的位置(0,0)然后有DDA算法计算斜率,他也是一样，具体的公式网上还是都有的，我的语言组织也不是很好-_-//
ball.t+=ball.speed;if(ball.t>1){
ball.t=1;
}//绘制点
context.font= "10px sans";
context.fillStyle= "#ff0000";
context.beginPath();
context.arc(p0.x,p0.y,8,0,Math.PI*2,true);
context.closePath();
context.fill();
context.fillStyle= "#fff";
context.fillText("0",p0.x-2,p0.y+2);//points.push({x:xt,y:yt});for(vari=0;i
context.drawImage(pointImage,points[i].x,points[i].y,1,1);
}
//绘制图片重点！！！！图片，定位context.drawImage(img,x,y,width,height);也就是绘制那个点后的小点的轨迹
context.closePath();
context.fillStyle="#000000";
context.beginPath();
context.arc(xt,yt,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}varp0={x:60,y:10};//起始点varp1={x:70,y:200};//1号点varp2={x:125,y:295};//2号点varp3={x:350,y:350};//3号点varball={x:0,y:0,speed:.01,t:0};varpoints=newArray();
//这里的起始点和3号点，我取得的名字比较通俗一下，实际上应该称为端点。因为必须要经过的 //1号点和2号点虽然可以删除但是他控制着弧线的路径，我们就叫他控制点
theCanvas=document.getElementById('canvas')
context=theCanvas.getContext("2d")
setInterval(drawScreen,33);
}
你的浏览器无法使用canvas
小白童鞋；你的支持是我最大的快乐！！
