canvas小球 时间倒计时demo-优化
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" style="height: 99%"></canvas>
</body>
<script src="digit.js"></script>
<script src="countdown.js"></script>
<script></script>
</html>
var 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,1,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,0,0,0],
[0,0,0,0,0,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,0,0,0]
]//:
];
digit.js
var window_width=1024,
window_height=768,
RADIUS= 8,
MARGIN_TOP=60,
MARGIN_LEFT=30,
//endTime=new Date(2017,5,10,12,47,52),//第二个参数是月份，值为0-11,表示1月 11表示12月
endTime=new Date();
endTime.setTime(endTime.getTime()+3*24*3600*1000);//设置为距离当前时间还有3天
curShowTimeSeconds=0;
var balls=[],
colors=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF6666","#C01110"]; window.onload=function(){
window_width=document.body.clientWidth;
window_height=document.body.clientHeight;
MARGIN_LEFT=Math.round(window_width/10);
RADIUS=Math.round(window_width*4/5/108)-1;
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(),ret=endTime.getTime()-curTime.getTime();
ret=Math.round(ret/1000);
return ret >=0?ret:0;
}
function update(){
var nextShowTimeSeconds=getCurrentShowTimeSeconds(),
nextHours=parseInt(nextShowTimeSeconds/3600),
nextMinutes=parseInt((nextShowTimeSeconds-nextHours*3600)/60),
nextSeconds=parseInt(nextShowTimeSeconds%60),
curHours=parseInt(curShowTimeSeconds/3600),
curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60),
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(nextSeconds%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>Math.min(300,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,//取-4或者正4
vy:-5,
color:colors[Math.floor(Math.random()*colors.length)]
};
balls.push(aBall);
}
}
}
}
function render(ctx){
ctx.clearRect(0,0,window_width,window_height);
var hours=parseInt(curShowTimeSeconds/3600),minutes=parseInt((curShowTimeSeconds-hours*3600)/60),seconds=parseInt(curShowTimeSeconds%60);
renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),ctx);
renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),ctx);
renderDigit(MARGIN_LEFT+28*(RADIUS+1),MARGIN_TOP,10,ctx);
renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),ctx);
renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),ctx);
renderDigit(MARGIN_LEFT+67*(RADIUS+1),MARGIN_TOP,10,ctx);
renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),ctx);
renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),ctx);
for(var i=0;i<balls.length;i++){
ctx.fillStyle=balls[i].color;
ctx.beginPath();
ctx.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();
}
}
function renderDigit(x,y,num,ctx){//绘制数字
ctx.fillStyle="rgb(0,102,153)";
for(var i=0;i<digit[num].length;i++){//i是行数 j是列数
for(var j=0;j<digit[num][i].length;j++){
if(digit[num][i][j] == 1){
ctx.beginPath();//圆心的位置centerX:x+j*2*(R+1)+(R+1) centerY:y+i*2*(R+1)+(R+1)
ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
ctx.closePath();
ctx.fill()
}
}
}
}
countdown.js
var window_width=1024,
window_height=768,
RADIUS= 8,
MARGIN_TOP=60,
MARGIN_LEFT=30,
//endTime=new Date(2017,5,10,12,47,52),//第二个参数是月份，值为0-11,表示1月 11表示12月
/* endTime=new Date();
endTime.setTime(endTime.getTime()+3*24*3600*1000);//设置为距离当前时间还有3天*/
curShowTimeSeconds=0;
var balls=[],
colors=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF6666","#C01110"]; window.onload=function(){
window_width=document.body.clientWidth;
window_height=document.body.clientHeight;
MARGIN_LEFT=Math.round(window_width/10);
RADIUS=Math.round(window_width*4/5/108)-1;
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(),
//ret=endTime.getTime()-curTime.getTime();
ret=curTime.getHours()*3600*1000+curTime.getMinutes()*60*1000+curTime.getSeconds()*1000;
ret=Math.round(ret/1000);
return ret >=0?ret:0;
}
function update(){
var nextShowTimeSeconds=getCurrentShowTimeSeconds(),
nextHours=parseInt(nextShowTimeSeconds/3600),
nextMinutes=parseInt((nextShowTimeSeconds-nextHours*3600)/60),
nextSeconds=parseInt(nextShowTimeSeconds%60),
curHours=parseInt(curShowTimeSeconds/3600),
curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60),
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(nextSeconds%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>Math.min(300,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,//取-4或者正4
vy:-5,
color:colors[Math.floor(Math.random()*colors.length)]
};
balls.push(aBall);
}
}
}
}
function render(ctx){
ctx.clearRect(0,0,window_width,window_height);
var hours=parseInt(curShowTimeSeconds/3600),minutes=parseInt((curShowTimeSeconds-hours*3600)/60),seconds=parseInt(curShowTimeSeconds%60);
renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),ctx);
renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),ctx);
renderDigit(MARGIN_LEFT+28*(RADIUS+1),MARGIN_TOP,10,ctx);
renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),ctx);
renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),ctx);
renderDigit(MARGIN_LEFT+67*(RADIUS+1),MARGIN_TOP,10,ctx);
renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),ctx);
renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),ctx);
for(var i=0;i<balls.length;i++){
ctx.fillStyle=balls[i].color;
ctx.beginPath();
ctx.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();
}
}
function renderDigit(x,y,num,ctx){//绘制数字
ctx.fillStyle="rgb(0,102,153)";
for(var i=0;i<digit[num].length;i++){//i是行数 j是列数
for(var j=0;j<digit[num][i].length;j++){
if(digit[num][i][j] == 1){
ctx.beginPath();//圆心的位置centerX:x+j*2*(R+1)+(R+1) centerY:y+i*2*(R+1)+(R+1)
ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
ctx.closePath();
ctx.fill()
}
}
}
}
countdown.js显示当前时间版
canvas小球 时间倒计时demo-优化的更多相关文章
- canvas小球 时间demo
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 使用canvas编写时间轴插件
使用canvas编写时间轴插件 背景 项目中有一个视频广场的功能,需要一个时间轴类似视频播放中进度条功能一样显示录像情况,并且可以点击.拖动.放大缩小展示时间轴,获取到时间轴的某个时间.原来的时间轴是 ...
- js时间倒计时
看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...
- h5 canvas 小球移动
h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 原生js 当前时间 倒计时代码
源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...
- Vue的实时时间转换Demo
Vue的实时时间转换Demo time.html: <!DOCTYPE html> <html lang="en"> <head> <me ...
- Java 获取当前时间及实现时间倒计时功能
引言 在一些项目中或是一些特殊的业务场景中,需要用到显示系统的当前时间,以及一些固定的时间倒计时,时间到后做一些什么事情的业务 .接下来咱们就具体看看代码是怎么实现的: <%@ page lan ...
- js+canvas(H5)实现小球移动小demo
*canvas提供画布,大小自定义,js得到画布,从画布对象通过getContext('2d')来得到画笔,然后就可以开始画了 代码: <!DOCTYPE html> <html l ...
- canvas小球动画原理
随着html5发展,canvas标签作为h5革命性的发展标志也越来越流行.canvas标签的强大之处,不仅在于它可以作为一个独立的画布,也可以利用canvas做一些动画而不用导入flash文件.同时, ...
随机推荐
- vue做的简单购物车
<code><!DOCTYPE html><html><head lang="en"> <meta charset=" ...
- Docker学习（二）: 镜像的使用与构建
特别声明: 博文主要是学习过程中的知识整理,以便之后的查阅回顾.部分内容来源于网络(如有摘录未标注请指出).内容如有差错,也欢迎指正! =============系列文章============= 1 ...
- 2.java设计模式-抽象工厂模式
抽象工厂模式简介: 每一个模式都是针对某一种问题的解决方案.抽象工厂模式与工厂模式最大的区别在于,工厂模式针对的是一个产品等级结构,而抽象工厂模式面对的是多个产品等级结构,即产品族的概念. 这里讲解一 ...
- groovy运行程序和类型推断
在 Java 中,如果要声明一个 String 变量,则必须输入: String value = "Hello World"; 等号右侧的字符已经表明 value 的类型是 Str ...
- idea 常用快捷键 笔记
1. main方法 输入psv tab或回车 类似的 psf fori (for循环) sout 备注: 通过ctrl+j 可以查询 2. 删除当前行 ctrl + y 3. 复制当前行 ctrl ...
- .net reflector+reflexil修改编译后的dll文件
1.用reflector打开相关的dll文件. 2.如果reflector中没有reflexil插件,点击工具栏中的Tools->Add-Ins 3.找到需要修改的文件,双击打开该文件:点击To ...
- PC端-上传头像并裁剪
界面一: <link href="../theme/js/layui.layim/src/css/layui.css" rel="stylesheet"/ ...
- Angular面试题一
一.ng-show/ng-hide 与 ng-if的区别? 第一点区别是, ng-if 在后面表达式为 true 的时候才创建这个 dom 节点, ng-show 是初始时就创建了,用 display ...
- 浏览器根对象window之值为数值的属性
1. number属性 1.1 length length 属性返回在当前窗口中frames的数量(包括IFRAMES). 该属性值与window.frames.length属性值相等. 1.2 in ...
- 使用ArcGIS Chef Cookbook轻松搞掂WebGIS平台部署
1.安装Chef Client v12版本. 2.复制arcgis cookbook资源到Chef安装目录. 3.考虑到一般部署的服务器环境无法连接互联网,所以需要事先部署ArcGIS Cookboo ...