<!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(){ context.fillStyle = '#eee' context.fillRect(0,0,theCanvas.width,theCanvas.height); //边框 context.strokeStyle = '#eee' context.strokeRect(1,1,theCanvas.width,theCanvas.height); 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; 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); } context.closePath(); context.fillStyle="#000000 "; context.beginPath(); context.arc(xt,yt,5,0,Math.PI*2,true); context.closePath(); context.fill(); } var p0={x:60,y:10};//起始点 var p1={x:70,y:200};//1号点 var p2={x:125,y:295};//2号点 var p3={x:350,y:350};//3号点 var ball={x:0,y:0,speed:.01,t:0}; var points=new Array(); theCanvas = document.getElementById('canvas') context = theCanvas.getContext("2d") setInterval(drawScreen,33); }</script><canvas id="canvas" width="800 " height="800 ">你的浏览器无法使用canvas小白童鞋；你的支持是我最大的快乐！！</canvas></body></html>"
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：html5 canvas高级贝塞尔曲线运动动画(本篇跨度较大！为了帮助别人解决个问题顺带的！)
关键词：HTML
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
