HTML5 canvas画布写炫彩动态的倒计时效果

html代码如下，插入了2个js代码。

 <!DOCTYPE html>

 <html>

 <head>

     <title>canvas</title>

 </head>

 <body>

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

 </body>

 <script type="text/javascript" src="digit.js"></script>

 <script type="text/javascript" src="countdown.js"></script>

 <script type="text/javascript">

 </script>

 </html>

digit.js文件是，将数字用0，1表示的一个3维数组。

countdown.js文件是核心js文件，利用canvas画出时间图像和小球。

 /*

 ************************

 * powered by Ming

 * 2014-9-23

 ***********************

 */

 var CANVAS_WIDTH = 700;//画布宽度

 var CANVAS_HEIGHT = 450;

 var RADIUS = 5;//画布的中，圆点的半径

 var MARGIN_TOP = 60;

 var MARGIN_LEFT = 30;

 const endTime = new Date(2014,8,25,18,17,52);

 var curShowTimeSeconds = 0;

 var balls = [];

 const colors = ["#00FFFF","#A52A2A","#7FFF00","#DC143C","#00FFFF","#FF00FF","#FFD700","#4B0082"];

 window.onload = function(){

     var canvas = document.getElementById("canvas");

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

     canvas.width = CANVAS_WIDTH;

     canvas.height = CANVAS_HEIGHT;

     curShowTimeSeconds = getCurrentShowTimeSeconds();

     setInterval( function(){

         render( context );

         update();

     },50 );

 }

 function getCurrentShowTimeSeconds(){

     var curTime = new Date();

     var ret = endTime.getTime() - curTime.getTime();

     ret = Math.round( ret/1000 );

     return ret >= 0 ?ret : 0;

 }

 function update(){

     var nextShowTimeSeconds = getCurrentShowTimeSeconds();

     var nextHours = parseInt( nextShowTimeSeconds/3600 );

     var nextMinutes = parseInt( (nextShowTimeSeconds - nextHours*3600)/60 );

     var nextSeconds = nextShowTimeSeconds%60 ;

     var curHours = parseInt( curShowTimeSeconds/3600 );

     var curMinutes = parseInt( (curShowTimeSeconds - curHours*3600)/60 );

     var curSeconds = curShowTimeSeconds%60;

     //判断当时间改变时，产生小球

     if( nextSeconds != curSeconds ){

         //判断小时的2位数字是否变化

         if( parseInt(curHours/10) != parseInt(nextHours/10) )

             addBalls( MARGIN_LEFT+0, MARGIN_TOP, parseInt(curHours/10) );

         if( parseInt(curHours%10) != parseInt(nextHours%10) )

             addBalls( MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP, parseInt(curHours%10) );

         //判断分钟

         if( parseInt(curMinutes/10) != parseInt(nextMinutes/10) )

             addBalls( MARGIN_LEFT+39*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes/10) );

         if( parseInt(curMinutes%10) != parseInt(nextMinutes%10) )

             addBalls( MARGIN_LEFT + 54*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes%10) );

         //判断秒钟

         if( parseInt(curSeconds/10) != parseInt(nextSeconds/10) )

             addBalls( MARGIN_LEFT+78*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds/10) );

         if( parseInt(curSeconds%10) != parseInt(nextSeconds%10) )

             addBalls( MARGIN_LEFT + 93*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds%10) );

         curShowTimeSeconds = nextShowTimeSeconds;

     }

     updateBalls();

     console.log( balls.length );

 }

 function updateBalls(){

     for( var i=0; i< balls.length;i++ ){

         balls[i].x += balls[i].vx;

         balls[i].y += balls[i].vy;

         balls[i].vy += balls[i].g

         if( balls[i].y >= CANVAS_HEIGHT - RADIUS ){

             balls[i].y = CANVAS_HEIGHT - RADIUS;

             balls[i].vy = - balls[i].vy*0.7;//设置摩擦因素

         }

     }

     //清除多余的小球，不在边框内的 ，优化性能

     var cnt = 0;

     for ( var i= 0;i< balls.length; i++ )

         if( balls[i].x + RADIUS >0 && balls[i].x - RADIUS < CANVAS_WIDTH )

             balls[cnt++] = balls[i];

         while( balls.length > Math.min(700,cnt) )

             balls.pop();

 }

 function addBalls( x,y,num ){

     for( var i = 0;i< digit[num].length ;i++ )

         for( var j = 0; j< digit[num][i].length; j++ )

             if( digit[num][i][j] == 1 ){

                 var aBall = {

                     x: x+ j*2*(RADIUS+1)+(RADIUS+1),

                     y: y+ i*2*(RADIUS+1)+(RADIUS+1),

                     g: 1.5+Math.random(),

                     vx:Math.pow( -1, Math.ceil( Math.random()*1000 )*11 ),

                     vy:-5,

                     color:colors[ Math.floor( Math.random()*colors.length ) ]

                 };

                 balls.push( aBall );

             }

 }

 function render( cxt ){

     cxt.clearRect( 0,0,CANVAS_WIDTH,CANVAS_HEIGHT );//刷新画布

     //获取当前时间值

     var hours = parseInt( curShowTimeSeconds/3600 );

     var minutes = parseInt( (curShowTimeSeconds - hours*3600)/60 );

     var seconds = parseInt( curShowTimeSeconds%60 );

     //parseInt() 解析一个字符串，并返回一个整数

     //在画布中，每个数字是由7个小方格组成的，故有7个半径为14，增加一点距离则为15，

     //而冒号是由4个组成，故为4个为8+1=9的距离间隔

     renderDigit( MARGIN_LEFT + 0, MARGIN_TOP, parseInt(hours/10),cxt );

     renderDigit( MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP, parseInt(hours%10),cxt );

     renderDigit( MARGIN_LEFT + 30*(RADIUS+1), MARGIN_TOP, 10,cxt );//添加冒号，在digit中冒号是第10个

     renderDigit( MARGIN_LEFT + 39*(RADIUS+1), MARGIN_TOP, parseInt(minutes/10),cxt );

     renderDigit( MARGIN_LEFT + 54*(RADIUS+1), MARGIN_TOP, parseInt(minutes%10),cxt );

     renderDigit( MARGIN_LEFT + 69*(RADIUS+1), MARGIN_TOP, 10,cxt );//添加冒号，在digit中冒号是第10个

     renderDigit( MARGIN_LEFT + 78*(RADIUS+1), MARGIN_TOP, parseInt(seconds/10),cxt );

     renderDigit( MARGIN_LEFT + 93*(RADIUS+1), MARGIN_TOP, parseInt(seconds%10),cxt );

     //给小球画颜色

     for( var i = 0;i< balls.length;i++ ){

         cxt.fillStyle = balls[i].color;

         cxt.beginPath();

         cxt.arc( balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true );

         cxt.closePath();

         cxt.fill();

     }

 }

 function renderDigit( x,y,num,cxt ){

     cxt.fillStyle = "#1E90FF";

     for( var i = 0;i< digit[num].length ;i++ )

         for( var j = 0; j< digit[num][i].length; j++ )

             if( digit[num][i][j] == 1 ){

                 cxt.beginPath();

                 cxt.arc( x+j*2*(RADIUS+1)+(RADIUS+1) ,y+ i*2*(RADIUS+1)+(RADIUS+1), RADIUS, 0, 2*Math.PI );

                 cxt.closePath();

                 cxt.fill();

             }

 }

HTML5 canvas画布写炫彩动态的倒计时效果的更多相关文章

html5+Canvas实现酷炫的小游戏
最近除了做业务,也在尝试学习h5和移动端,在这个过程中,学到了很多,利用h5和canvas做了一个爱心鱼的小游戏.点这里去玩一下 PS: 貌似有点闪屏,亲测多刷新两下就好了==.代码在本地跑都不会闪, ...
Canvas跟随鼠标炫彩小球
跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思实现效果超级炫酷实现原理创建小球给小球添加随机颜色,随机半径鼠标移动通过实例化,新增小球通过调用给原型新增的方法,来实现小球的动画 ...
html5——canvas画布
一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,heig ...
html5 canvas画布上合成
source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...
HTML5 Canvas 画布
一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素加上基本的属 ...
css总结19:HTML5 Canvas(画布)
1 <canvas> 标签定义图形,比如图表和其他图像. 例1:简单使用: <canvas id="Canva" width="200" h ...
关于canvas画布使用fillRect()时高度出现双倍效果解决办法
当设置canvas的宽度和高度时,只有内嵌css有效,外部css会出现拉伸的情况,例如: <!DOCTYPE html> <html lang="en"> ...
8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录使用方法自定义参数相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

随机推荐

Oracle like查询
查询方式:LIKE '%xx%' 普通: SELECT * FROM TABLE T WHERE T.COLUNM LIKE '%xx%' 优化:使用 INSTR SELECT * FROM TABL ...
安卓初級教程（4）：sqlite建立資料庫
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 ...
SQL Server复制出错文章集锦
SQL Server复制出错文章集锦为了方便大家对数据库复制过程中出错的时候更好地解决问题本人收集了SQL Server相关复制出错解决的文章 The process could not ex ...
高灵活度，高适用性，高性能，轻量级的 ORM 实现
ORM(Object-Relational Mapping 对象关系映射),它的作用是在关系型数据库和业务实体对象之间作一个映射,目的是提供易于理解的模型化数据的方法. ORM虽然有诸多好处,但是在实 ...
Chrome 控制台新玩法-console显示图片以及为文字加样式
有兴趣的同学可以文章最后的代码复制贴到控制台玩玩. Go for Code 在正常模式下,一般只能向console 控制台输出简单的文字信息.但为了把信息输出得更优雅更便于阅读,除了cosole.lo ...
xamarin 手机顶部状态栏
修改显示xamarin开发的App的手机顶部状态栏, 步骤一:在项目UWP上的“引用”里右键“添加引用”,选择->Universal Windows->Windows Mobile Ext ...
MySQL外键之级联
简介 MySQL外键起到约束作用,在数据库层面保证数据的完整性.例如使用外键的CASCADE类型,当子表(例如user_info)关联父表(例如user)时,父表更新或删除时,子表会更新或删除记录,这 ...
python3.5 正则表达式
我们平时上网的时候,经常需要在一些网站上注册帐号,而注册帐号的时候对帐号名称会有一些要求. 比如: 上面的图片中,输入的邮件地址.密码.手机号才可以注册成功. 我们需要匹配用户输入的内容,判断用户输 ...
session和cookie的区别
cookie机制和session机制的区别具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案. 同时我们也看到,由于才服务器 ...
Select count(*)和Count（1）的区别和执行方式
在SQL Server中Count(*)或者Count(1)或者Count([列])或许是最常用的聚合函数.很多人其实对这三者之间是区分不清的.本文会阐述这三者的作用,关系以及背后的原理. ...

HTML5 canvas画布写炫彩动态的倒计时效果

HTML5 canvas画布写炫彩动态的倒计时效果的更多相关文章

随机推荐

热门专题