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

随机推荐

流行的JavaScript库 ——jQuery
1.为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的 Web2.0 特性的富客 ...
Unity3D UGUI之ScrollView弹簧效果
unity3d版本5.3.2p4 UGUI中ScrollView包含Viewport(Content) ScrollView包含脚本.其Movement Type一共3个选项.Elastic就是弹簧效 ...
eclipse插件开发入门
2016-09-09 17:11:50 1. 概述 1.1 SWT/JFace 是Eclipse 的基础,Eclipse 的 Workbench 就是建立在 SWT/JFace 之上的.另外,JFac ...
【优雅代码】深入浅出妙用Javascript中apply、call、bind
这篇文章实在是很难下笔,因为网上相关文章不胜枚举. 巧合的是前些天看到阮老师的一篇文章的一句话: “对我来说,博客首先是一种知识管理工具,其次才是传播工具.我的技术文章,主要用来整理我还不懂的知识.我 ...
.Net开发笔记（十四）基于“泵”的UDP通信（接上篇）
上一篇中说到了“泵”在编程中的作用以及一些具体用处,但没有实际demo,可能不好理解,这篇文章我分享一个UDP通信的demo,大概实现了类似“飞鸽传书”在局域网中文本消息和文件传输的功能.功能不全也不 ...
MySQL LIST分区
200 ? "200px" : this.width)!important;} --> 介绍 LIST分区和RANGE分区非常的相似,主要区别在于LIST是枚举值列表的集合, ...
SQL语句到底是怎么执行的
写在前面的话:有时不理解SQL语句各个部分执行顺序,导致理解上出现偏差,或者是书写SQL语句时随心所欲,所以有必要了解一下sql语句的执行顺序.可以有时间自己写一个简单的数据库,理解会更加深入.下面就 ...
spring快速入门（四）
一.在spring快速入门(三)的基础上,我们来了解BeanFactory及配置. Client package com.murong.client; import org.springframewo ...
promise实现原理
先看的这篇有问题的文章花了很长时间研究这篇文章,卡在实现串行Promise那儿了,一直看不明白.就在刚才,发现这篇文章是错的,在第一次用setTimeout( ,0)那儿就错了.虽然用setTime ...
初学者--bootstrap（四）栅格系统----在路上（8）
---------------------------------------栅格系统:是bootstrap提供的响应式布局方式------------------------------------ ...

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

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

随机推荐

热门专题