课程咨询 :0551-64632520

合肥web前端培训

合肥web培训 > 达内新闻 > 运用HTML5实现计时动画效果
  • 运用HTML5实现计时动画效果

    发布:合肥web培训      来源:达内新闻      时间:2016-05-24

  • 合肥达内web培训专家讲一下如何运用HTML5实现计时动画效果。

    实现原理:利用HTML5的canvas,绘制出一个小球,然后根据数字的矩阵数组来排行小球,如数字0的矩阵数组:

    [
     [0,0,1,1,1,0,0],
     [0,1,1,0,1,1,0],
     [1,1,0,0,0,1,1],
     [1,1,0,0,0,1,1],
     [1,1,0,0,0,1,1],
     [1,1,0,0,0,1,1],
     [1,1,0,0,0,1,1],
     [1,1,0,0,0,1,1],
     [0,1,1,0,1,1,0],
     [0,0,1,1,1,0,0]
    ],//0根

    据数字0的矩阵数组,可以分别绘制出时间的时,分,秒 的小球数字;然后就是时间的变化,跟普通做时间计时效果一样,利用JS的setInterval函数:

    setInterval(function(){
     render(context);
     update(); //具体实现参考源码
    },50);

    动画效果:

    <canvas id="canvas" style="display:block; margin:50px auto;border:1px solid #000"></canvas>

     <script>
     //小球的x点,y点,r半径,g加速度,xv水平速度,yv垂直速度,color颜色
     var ball = {x:550, y:50, r:10, g:2, xv:-10, yv:-10, color:'red'};
     window.onload = function(){
     var canvas = document.getElementById('canvas');

     canvas.width=300 ;
     canvas.height = 300;

     var context = canvas.getContext('2d');

     setInterval(function(){
     render(context);
     update();
     },50);

     }

     function update(){
     ball.x += ball.xv;
     ball.y += ball.yv;
     ball.yv += ball.g;

     if(ball.y >= 300-ball.r){
     ball.y = 300-ball.r ;
     ball.yv = -ball.yv * 0.25;
     }

     }

     function render(cxt){
     cxt.clearRect(0, 0, canvas.width, canvas.height);
     cxt.beginPath();
     cxt.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI);
     cxt.closePath();
     cxt.fillStyle = ball.color;
     cxt.fill();
     }

     </script>

    最后,根据时间值的变化产生出更多的效果。

    推荐文章

上一篇:margin重叠和固定层

下一篇:巧用Canvas模拟微信红包照片

最新开班日期  |  更多

WEB零基础全日制班

WEB零基础全日制班

开班日期:4-15

WEB零基础周末班

WEB零基础周末班

开班日期:

WEB前端业余班

WEB前端业余班

开班日期:4-15

WEB前端就业班

WEB前端就业班

开班日期:4-15

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632520     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56