canvas小球 时间demo
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #ccc;margin:20px auto"></canvas>
</body>
<script src="digit.js"></script>
<script src="countdown.js"></script>
<script></script>
</html>
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月
curShowTimeSeconds=0;
var balls=[],
colors=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF6666","#C01110"]; window.onload=function(){
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;
}
}
}
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 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
canvas小球 时间demo的更多相关文章
- canvas小球 时间倒计时demo-优化
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5 之Canvas 绘制时钟 Demo
<!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...
- 使用canvas编写时间轴插件
使用canvas编写时间轴插件 背景 项目中有一个视频广场的功能,需要一个时间轴类似视频播放中进度条功能一样显示录像情况,并且可以点击.拖动.放大缩小展示时间轴,获取到时间轴的某个时间.原来的时间轴是 ...
- h5 canvas 小球移动
h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- canvas画箭头demo
效果图: 代码: <!DOCTYPE html> <html> <title>canvas画箭头demo</title> <body> &l ...
- canvas小球动画原理
随着html5发展,canvas标签作为h5革命性的发展标志也越来越流行.canvas标签的强大之处,不仅在于它可以作为一个独立的画布,也可以利用canvas做一些动画而不用导入flash文件.同时, ...
- canvas小球
小球碰撞效果是采用面向对象的方式写的,在小球的构造器里包含了小球的属性值,大小,移动速度,半径大小以及颜色. 在小球的原型方法里,添加了小球运动的方法,当小球碰撞到屏幕边界的时候进行反弹. 小球是 ...
- C语言 位移 速度 时间 Demo
/************************************************************************* * C语言(s = v*t + a*t*t/2)D ...
- 再探canvas(小球实例)
之前学习过canvas的一些使用,也用过canvas绘制过时钟, 但是很久不用,有些遗忘了,这里做一个简单的回顾. 在web页面创建一个canvas画布非常简单,如下即可: <canvas id ...
随机推荐
- FusionChart实现柱状图、饼状图的动态数据显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 总结：Python学习 和 Python与C/C++交互
本篇仅仅是Python的学习和Python和C++数据对接过程中的一些总结. 由于工作的需要,用一周的时间学习 Python. Python是基于C实现的一门解释型语言,由于其易用性,俘获了不少开发者 ...
- easyui 带参数的datagride
<table id="tt" style="width:100%;height:355px" url="../aowei/Handler/Han ...
- [C语言] 数据结构-衡量算法的标准
1.衡量算法的标准 算法 解题的方法和步骤 衡量算法的标准 1.时间复杂度 大概程序要执行的次数,而非执行的时间,不同的机器运行时间肯定不一样. 2.空间复杂度 算法执行过程中大概所占用的最大内存 3 ...
- mysql 中优化数据类型的三个原则
数据类型越小越好 在业务够用的情况下,尽可能选取小的数据类型.不仅占用空间小,而且执行查询等操作时性能好. 越简单越好 对于简单的类型,在处理时会占用更少的 CPU 周期. 例如,整数就比字符类型简单 ...
- Spring的自动装配Bean
spring的自动装配功能的定义:无须在Spring配置文件中描述javaBean之间的依赖关系(如配置<property>.<constructor-arg>).IOC容器会 ...
- js-js的语句
- Java里面的语句: ** if判断 *** =:表示赋值 *** ==:表示判断 ** switch语句 ** 循环 for while do-while - js里面的也是这些语句 ** if ...
- 军事机密(Secret.pas)
军事机密(Secret.pas) [问题描述] 军方截获的信息由n(n<=30000)个数字组成,因为是敌国的高端秘密,所以一时不能破获.最原始的想法就是对这n个数进行小到大排序, ...
- Designers, please follow the guidelines
Skype released big update for its iOS application last week. It brought in a major overhaul of not o ...
- 利用Metaweblog技术的API接口同步到多个博客网站（详细）
很早就有这个想法:自己有时候会用到多个博客,有些博客在一个网站上写完之后,要同步到其他博客网站,自己只能复制粘贴,感觉特别没意思,复制粘贴的麻木了.一直在想有哪些技术能实现一次写博,多站同步.最近网上 ...