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画布写炫彩动态的倒计时效果的更多相关文章

  1. html5+Canvas实现酷炫的小游戏

    最近除了做业务,也在尝试学习h5和移动端,在这个过程中,学到了很多,利用h5和canvas做了一个爱心鱼的小游戏.点这里去玩一下 PS: 貌似有点闪屏,亲测多刷新两下就好了==.代码在本地跑都不会闪, ...

  2. Canvas跟随鼠标炫彩小球

    跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思 实现效果 超级炫酷 实现原理 创建小球 给小球添加随机颜色,随机半径 鼠标移动通过实例化,新增小球 通过调用给原型新增的方法,来实现小球的动画 ...

  3. html5——canvas画布

    一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,heig ...

  4. html5 canvas画布上合成

    source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...

  5. HTML5 Canvas 画布

    一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素 加上基本的属 ...

  6. css总结19:HTML5 Canvas(画布)

    1  <canvas> 标签定义图形,比如图表和其他图像. 例1:简单使用: <canvas id="Canva" width="200" h ...

  7. 关于canvas画布使用fillRect()时高度出现双倍效果解决办法

    当设置canvas的宽度和高度时,只有内嵌css有效,外部css会出现拉伸的情况,例如: <!DOCTYPE html> <html lang="en"> ...

  8. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  9. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

随机推荐

  1. FizzBuzzWhizz游戏的高效解法

    最近比较火的一道题(传送门),看见园友们的谈论(传送门1 传送门2),都是从1到100的扫描,我想说说的另一种想法. 可以把这道题转换成给100个人发纸牌的游戏,每人所报的就是纸牌上写的东西. 纸牌发 ...

  2. .net core 学习

    资源: https://github.com/aspnet/home https://github.com/dotnet/cli

  3. 玩转Windows服务系列——Windows服务小技巧

    伴随着研究Windows服务,逐渐掌握了一些小技巧,现在与大家分享一下. 将Windows服务转变为控制台程序 由于默认的Windows服务程序,编译后为Win32的窗口程序.我们在程序启动或运行过程 ...

  4. 在C#代码中应用Log4Net（二）典型的使用方式

    不管用什么框架,学什么东西,最初的想法还不是尽快地用上这个框架,所以我们在这个章节还是不打算介绍具体配置节的应用,而是直接给出一个经典的使用样例,让你尽快上手.即使你对Log4Net的配置不熟悉也完全 ...

  5. [译]Asp.net MVC 之 Contorllers（二）

    URL路由模块 取代URL重写 路由请求 URL路由模块的内部结构 应用程序路由 URL模式和路由 定义应用程序路由 处理路由 路由处理程序 处理物理文件请求 防止路由定义的URL 属性路由 书接上回 ...

  6. ystep jQuery流程、步骤插件

    今天小菜给大家带来又一款给力jQuery插件:ystep. 从名称上大致可以看出,这是一个流程步骤插件. 如果无意外的话,这可能是小菜近期最后一个作品了...苦逼的小菜即将创业,可能就没时间折腾啦~好 ...

  7. java中集合类中Collection接口中的List接口的常用方法熟悉

    1:集合类,在java语言中的java.util包提供了一些集合类,这些集合类又被称作容器. 2:区别集合类和数组.(1)数组的长度是固定的,集合的长度是可变的.(2)数组是用来存放基本数据类型的,集 ...

  8. C#实现哥德巴赫猜想

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Goet ...

  9. 【原创】开源Math.NET基础数学类库使用(11)C#计算相关系数

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  10. 【开源】OSharp框架解说系列（4）：架构分层及IoC

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...