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画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

随机推荐

一鼓作气博客--第六篇 note6
1.无论公司付给你多少,你的青春都是廉价的!! 2.通往财富自由之路 --得到APP 3.time 3.1 time.time() t = time.time() print(t) #--->1 ...
sql查询
结果集是 id name 1 张三2 张三3 李四4 王五5 王五我想查询出有多少不重名的人的数量,并显示在每一行结果集里面结果如下:num id name 3 1 张三3 2 ...
ABP理论学习之启动配置
返回总目录本篇目录配置ABP 配置模块为模块创建配置为了在应用启动时配置ABP和模块,ABP提供了一个基础设施. 配置ABP 配置ABP是在模块的PreInitialize事件中完成的.下面的 ...
使用NServiceBus开发分布式应用
系列主题:基于消息的软件架构模型演变 NServiceBus 是一个.Net平台下开源的消息服务框架,这类产品有时也被称作ESB(Enterprise Service Bus)--企业服务总线.NSe ...
程序猿尤其是.NET程序员所需要注意的网站资源
我觉得一个程序员需要对技术和行业两方面同时具有极大热情和注意力才能让自己在一个新的台阶. 有些程序员就是对技术有着极大的热情但是行业完全不注意,这样我感觉只能成为一个专家,并不能让自己真正 ...
2013 duilib入门简明教程 -- 完整的自绘标题栏(8)
看了前面那么多教程,相信对duilib已有基本映像了,我们就快马加鞭,做出一个完整的自绘标题栏吧~ 看到下面这个效果图,小伙伴们是不是有点惊呆了呢~O(∩_∩)O~ dui ...
iOS---后台运行机制详解
一.iOS的“伪后台”程序首先,先了解一下iOS 中所谓的「后台进程」到底是怎么回事吧? Let me be as clear as I can be: the iOS multitasking b ...
.Net中List<T> 泛型转成DataTable、DataSet
在开发过程过程中有时候需要将List<T>泛型转换成DataTable.DataSet,可以利用反射机制将DataTable的字段与自定义类型的公开属性互相赋值. 1.List<T& ...
android 手把手教您自定义ViewGroup（一）
1.概述在写代码之前,我必须得问几个问题: 1.ViewGroup的职责是啥? ViewGroup相当于一个放置View的容器,并且我们在写布局xml的时候,会告诉容器(凡是以layout为开头的属 ...
设计与开发一款简单易用的Web报表工具（支持常用关系数据及hadoop、hbase等)
EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(Ro ...

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

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

随机推荐

热门专题