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

随机推荐

OUTLOOK 发生错误0x8004010D
问题: outlook 2003 在接收邮件时报错: “正在接收”报告了错误(0x8004010D):“在包含您的数据文件的驱动器上,磁盘空间不足.请清空“已删除邮件”文件夹或删除某些文件以释放 ...
JAVA第五次作业
import javax.media.; import java.awt.; import java.awt.event.; class MediaPlayer extends Frame imple ...
Linq 那些事儿
今天突然好奇当linq进行循环遍历的时候,如果满足条件的时候还会不会继续循环剩余的数据,做了个小实验. 首先看看上代码这个是测试的类 public class TestLinq { int _Num ...
es6入门教程完整版
ECMAScript 6入门 <ECMAScript 6入门>是一本开源的JavaScript语言教程,全面介绍ECMAScript 6新引入的语法特性. 作者:阮一峰授权:署名-非商用 ...
ASP.NET Core Docker部署
前言在前面文章中,介绍了 ASP.NET Core在 macOS,Linux 上基于Nginx和Jexus的发布和部署,本篇文章主要是如何在Docker容器中运行ASP.NET Core应用程序. ...
.NET中那些所谓的新语法之四：标准查询运算符与LINQ
开篇:在上一篇中,我们了解了预定义委托与Lambda表达式等所谓的新语法,这一篇我们继续征程,看看标准查询运算符和LINQ.标准查询运算符是定义在System.Linq.Enumerable类中的50 ...
MySQL MVCC(多版本并发控制)
概述为了提高并发MySQL加入了多版本并发控制,它把旧版本记录保存在了共享表空间(undolog),当事务提交之后将重做日志写入磁盘(前提innodb_flush_log_at_trx_commit ...
辛巴学院-Unity-剑英陪你零基础学c#系列(二)顺序
这不是草稿辛巴学院:正大光明的不务正业. 上一次的教程写出来之后,反馈还是挺多的,有很多都做了修改,也有一些让人崩溃,不得不说上几句.有些人有些很奇怪的地方,你写篇东西,被看了以后不说他感觉怎么 ...
Eclipse 调试技巧
条件断点顾名思义,是指当发生某种情况或者触发某种条件的情况下命中断点.常用的情形就是for循环中某个变量为xx值的时候命中断点类似的. 做法1:在debug视图中,BreakPoint View将所 ...
查看html元素绑定的事件与方法的利器
WEB标准提倡结构.表现和行为相分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...

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

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

随机推荐

热门专题