<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>canvas高级贝塞尔曲线运动动画</title><script src='/images/loading.gif' data-original="js/modernizr.js "></script></head><body><script type="text/javascript ">window.addEventListener('load',eventWindowLoaded,false);function eventWindowLoaded(){ canvasApp();}function canvasSupport(){ return Modernizr.canvas;}function canvasApp(){ if(!canvasSupport()){ return; } var pointImage = new Image(); pointImage.src='/images/loading.gif' data-original="point.png "; function drawScreen(){//在这里解释下贝塞尔曲线，看网页底部的那个点击成Canvas三次贝塞尔曲线操作实例！你就会发现一个曲线是由4个点组成的 var t = ball.t; var cx = 3*(p1.x-p0.x); var bx = 3*(p2.x-p1.x)-cx; var ax = p3.x-p0.x-cx-bx; var cy = 3*(p1.y-p0.y); var by = 3*(p2.y-p1.y)-cy; var ay = p3.y-p0.y-cy-by; var xt = ax*(t*t*t)+bx*(t*t)+cx*t+p0.x; var yt = ay*(t*t*t)+by*(t*t)+cy*t+p0.y; //这里的xt和yt贝塞尔曲线的公式，这里涉及到一门叫做计算机图形学的学科（大学里面有上，我也最近一直在上） 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(var i =0;i<points.length;i++){ context.drawImage(pointImage,points[i].x,points[i].y,1,1);
原标题：html5 canvas高级贝塞尔曲线运动动画(好吧这一篇被批的体无完肤！都说看不懂了！没办法加注释了！当然数学不好的我也没办法了，当然这还涉及到一门叫做计算机图形学的学科)
关键词：HTML
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
