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函数的时候会遇到以下的几 ...
随机推荐
- 【Gamma】Scrum Meeting 8
前言 会议定点:大运村公寓 会议时间:2019/6/7 会议目的:分配任务,准备宣传 一.任务进度 组员 上周任务进度 下阶段任务 大娃 辅助做好引导录屏 优化辅助模型 二娃 撰写会议博客 撰写会议博 ...
- 【Maven插件】exec-maven-plugin
<plugin> <artifactId>exec-maven-plugin</artifactId> <groupId>org.codehaus.mo ...
- Pod Preset玩转K8S容器时区自动配置
缘由默认的情况,在K8S里启动一个容器,该容器的设置的时区是UTC0,但是对于很多客户而言,其主机环境并不在UTC0.例如中国客户在UTC8.如果不把容器的时区和主机主机设置为一致,则在查找日志等时候 ...
- Python 的文件保存路径
1.保存在当前代码同级的目录下: 2.保存在代码文件夹外面一层的新文件夹(data文件夹与代码文件夹同级)里: 3.保存在下一级的子文件夹里
- Ognl 使用实例手册
上一篇博文介绍了ongl的基础语法,接下来进入实际的使用篇,我们将结合一些实际的case,来演示ognl究竟可以支撑到什么地步 在看本文之前,强烈建议先熟悉一下什么是ognl,以及其语法特点,减少阅读 ...
- css3自定义上传图片输入框的方法
css3自定义上传图片输入框的方法 代码如下<pre> <form class="form1"> <img src="/kelatoupia ...
- 微信小程序：防止多次点击跳转（函数节流）
场景 在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次): 解决办法 然后从 轻松理解JS函数 ...
- 怎么看系统是UEFI还是Legacy BIOS启动模式?
在命令行 cmd 中输入 msinfo32 ,找到右侧[BIOS模式],看到这里显示的是[uefi],那么说明是[uefi]方式启动的,反之显示为[BIOS],那么就是传统[BIOS]启动模式.如下 ...
- Win 10下安装 Redis
目录 写在前面 一.安装环境 二.下载windows版本的Redis 三.安装Redis 四.安装服务 五.启动服务 六.测试Redis 七.常用的Redis服务. 写在前面 Redis 是一个开源使 ...
- 修改dedecms 一些配置cfg_softname，cfg_soft_enname，cfg_soft_devteam
1.找到include 中的common.inc.php 直接修改就可以了.