html 曲线动画,HTML5 anvas如何实现高级贝塞尔曲线运动动画

本篇教程探讨了HTML5 anvas如何实现高级贝塞尔曲线运动动画，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

window.addEventListener(‘load‘,eventWindowLoaded,false);

function eventWindowLoaded(){

canvasApp();

}

function canvasSupport(){

return Modernizr.canvas;

}

function canvasApp(){

if(!canvasSupport()){

return;

}

var pointImage = new Image();

pointImage.src="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

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);

}

你的浏览器无法使用canvas

小白童鞋；你的支持是我最大的快乐！！

"

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！