html5 canvas高级贝塞尔曲线运动动画(本篇跨度较大！为了帮助别人解决个问题顺带的！)

浏览数：22 / 时间：2015年06月09日

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas高级贝塞尔曲线运动动画</title>
<script src="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="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>"