canvas小案列-绚丽多彩的倒计时
本次随笔中，我将实现一个绚丽的倒计时效果，这个效果主要是结合canvas和js实现的，具体代码如下
index.html文件
<!DOCTYPE html>
<html>
<head>
</head>
<body style="height:100%">
<canvas id="canvas" style="height:100%">
</canvas> <script src="digit.js"></script>
<script src="countdown.js"></script>
</body>
</html>
接着书写digit.js文件，这个文件中主要是一个三维数组，观察可以发现，总共有十个二维数组，分别对应1...9和：
digit =
[
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
],//
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[1,1,1,1,1,1,1]
],//
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1]
],//
[
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,1]
],//
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//
[
[0,0,0,0,1,1,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0]
],//
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,1,1,0,0,0,0]
],//
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
]//:
];
最后实现整个效果的代码书写在countdown.js中
var WINDOW_WIDTH=1024;
var WINDOW_HEIGHT=768;
var RADIUS=8;
var MARGIN_TOP=60;
var MARGIN_LEFT=30;
var endTime=new Date();
endTime.setTime(endTime.getTime()+3600*1000); var curShowTimeSeconds=0;
var balls=[];
const colors=["#33b5E5","#0099cc","#aa66cc","#9933cc","#99cc00","#669900","#FFBB33","#FF8800","#FF4444","#cc0000"];
window.onload=function(){
WINDOW_WIDTH=document.body.clientWidth;
WINDOW_HEIGHT=768; MARGIN_LEFT=Math.round(WINDOW_WIDTH/10);
RADIUS=Math.round(WINDOW_WIDTH*4/5/108)-1;
MARGIN_TOP=Math.round(WINDOW_HEIGHT/5);
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
canvas.width=WINDOW_WIDTH;;
canvas.height=WINDOW_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/60%60);
var nextSeconds=parseInt(nextShowTimeSeconds%60); var curHours=parseInt(curShowTimeSeconds/3600);
var curMinutes=parseInt(curShowTimeSeconds/60%60);
var curSeconds=parseInt(curShowTimeSeconds%60);
if(nextSeconds!=curSeconds){
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();
}
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>=WINDOW_HEIGHT-RADIUS){
balls[i].y=WINDOW_HEIGHT-RADIUS;
balls[i].vy=-balls[i].vy*0.75;
}
}
var cnt=0;
for(var i=0;i<balls.length;i++)
if(balls[i].x+RADIUS>0&&balls[i].x-RADIUS<WINDOW_WIDTH)
balls[cnt++]=balls[i];
while(balls.length>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))*4,
vy:-5,
color:colors[Math.floor(Math.random()*colors.length)]
}
balls.push(aBall);
}
}
function render(cxt){
cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
var hours=parseInt(curShowTimeSeconds/3600);
var minutes=parseInt(curShowTimeSeconds/60%60);
var seconds=parseInt(curShowTimeSeconds%60);
//var hours=12;
//var minutes=34;
// var seconds=56;
renderDigit(MARGIN_LEFT,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);
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);
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 = "rgb(0,102,153)"; 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()
}
}
大家赶快来试验一下吧！
canvas小案列-绚丽多彩的倒计时的更多相关文章
- 使用nosql实现页面静态化的一个小案列
页面静态化,其实就是将动态生成的php页面,变成静态的HTML页面,让用户直接访问.有一下几方面好处: 1,首先就是访问速度,不需要去访问数据库,或者缓存来获取哪些数据,浏览器直接加载渲染html页即 ...
- Jquery局部刷新小案列
/* 调用showTest()方法去后台拿到处理数据后返回到part.jsp页面,main.jsp再调用html()方法 和显示的结果集show()方法把part.jsp显示到当前的页面,实现局部页面 ...
- jQuery---EasyUI小案列
jQuery EasyUI为提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree等等 ...
- 表格排序tablesort小案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Tensorflow 中（批量）读取数据的案列分析及TFRecord文件的打包与读取
内容概要: 单一数据读取方式: 第一种:slice_input_producer() # 返回值可以直接通过 Session.run([images, labels])查看,且第一个参数必须放在列表中 ...
- 2021年-在windwos下如何用TOMACT发布一个系统（完整配置案列）
2021年新年第一篇:博主@李宗盛-关于在Windwos下使用TOMCAT发布一个系统的完成配置案列. 之前写过关于TOMCAT的小篇幅文档,比较分散,可以作为对照与参考. 此篇整合在一起,一篇文档写 ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- Spring MVC的配置文件(XML)的几个经典案列
1.既然是配置文件版的,那配置文件自然是必不可少,且应该会很复杂,那我们就以一个一个的来慢慢分析这些个经典案列吧! 01.实现Controller /* * 控制器 */ public class M ...
- js闭包的作用域以及闭包案列的介绍：
转载▼ 标签: it js闭包的作用域以及闭包案列的介绍: 首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...
随机推荐
- Guava cacha 机制及源码分析
1.ehcahce 什么时候用比较好:2.问题:当有个消息的key不在guava里面的话,如果大量的消息过来,会同时请求数据库吗?还是只有一个请求数据库,其他的等待第一个把数据从DB加载到Guava中 ...
- 灵魂拷问：Java对象的内存分配过程是如何保证线程安全的？(阿里面试)
JVM内存结构,是很重要的知识,相信每一个静心准备过面试的程序员都可以清楚的把堆.栈.方法区等介绍的比较清楚. 上图,是一张在作者根据<Java虚拟机规范(Java SE 8)>中描述的J ...
- 一张MGR切换的图，不解释
- QML学习(五)——<TextInput和TextEdif输入框>
这一篇来看两个用于文本输入的项目,分别是作为单行文本输入的 TextInput 和多行文本输入的 TextEdit . 下面开始教程. TextInput TextInput 项目用来显示单行可编辑的 ...
- mongo 操作
1.链接mongo /path_to_mongo/bin/mongo MongoDB shell version: connecting to: test > use logs switched ...
- idea从github导入maven项目
原文地址:https://blog.csdn.net/dianyongpai3113/article/details/82784716 之后next.finish就好了
- Netty4实战 - TCP粘包&拆包解决方案
Netty是目前业界最流行的NIO框架之一,它的健壮性.高性能.可定制和可扩展性在同类框架中都是首屈一指.它已经得到了成百上千的商业项目的验证,例如Hadoop的RPC框架Avro就使用了Netty作 ...
- Java爬虫利器HTML解析工具-Jsoup
Jsoup简介 Java爬虫解析HTML文档的工具有:htmlparser, Jsoup.本文将会详细介绍Jsoup的使用方法,10分钟搞定Java爬虫HTML解析. Jsoup可以直接解析某个URL ...
- Vim 入门教程
Vim 入门教程 转载请保留以上信息 Vim 的教程相对比较零散,系统的教程比较少,我也阅读过不少教程,走过很 多弯路.借着 Vim-china 组织组建这一契机,整理下自己学习过的内容, 分享给大家 ...
- Oulipo 子串查找
题目描述 思路 使用哈希值表示较长串的子串的值,直接比较哈希值是否相等 代码 #include <cstdio> #include <cstring> using namesp ...