合肥Web培训
达内合肥web培训中心

0551-64632511

热门课程

运用HTML5实现计时动画效果

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

合肥达内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模拟微信红包照片

JavaScript是真正的 OOP 语言吗?

合肥达内Web培训机构:浅谈2017年web网页新趋势

合肥达内Web培训机构聊一聊web前端开发的行业前景

合肥达内Web前端培训培养软件开发工程师

选择城市和中心
贵州省

广西省

海南省