你的位置:首页 > 网页设计

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


<!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="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>"

 http://files.cnblogs.com/files/LoveOrHate/canvas13.rar

刚刚有人问canvas是否能完成这样的效果,然后我就大致写了个大概!这个跨度跳的比较大的

因为我也没钱买空间放demo

所以大家把代码跑一下就行了-_-//

如果问我月入上W的话,我表示http://www.vogue.com.cn/     上面的东西很贵的!偶要把钱存起来,以后交女朋友很贵的T_T