canvas,制作炫酷的时钟和倒计时
html部分
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #a5b2b9 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4a8a01 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; min-height: 35.0px }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #d74200 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #289c97 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #d74200 }
span.s4 { color: #48565d }
span.s5 { color: #289c97 }
span.s6 { color: #ad42ef }
span.s7 { color: #698906 }
span.s8 { color: #4a8a01 }
span.Apple-tab-span { white-space: pre }
<!DOCTYPE html>
<!--下面三个百分比都是为了实现后期项目优化的时候,实现自适应屏幕的宽度和高度-->
<html style="height: 100%;">
<!--这个需要HTML标签上也得加上style="height:100%"才行,要不然会显示一半,经常用CSS的都知道,BODY 想高度100%,外标签HTML也得设置100%-->
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="height: 100%;">
<canvas id="canvas" style="height: 100%;"></canvas>
<script type="text/javascript" src="js/digit.js"></script>
<script type="text/javascript" src="js/countdown9.js"></script>
</body>
</html>
digit.js部分
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4f5d66 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #698906 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas }
span.s1 { color: #698906 }
span.s2 { color: #4f5d66 }
span.s3 { color: #ad42ef }
span.s4 { color: #a5b2b9 }
span.s5 { color: #000000 }
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,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]
],//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]
],//2
[
[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]
],//3
[
[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]
],//4
[
[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]
],//5
[
[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]
],//6
[
[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]
],//7
[
[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]
],//8
[
[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]
],//9
[
[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]
]//:
];
countdown9.js部分
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4f5d66 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #a5b2b9 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; min-height: 35.0px }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #289c97 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4663cc }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #e48b00 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4f5d66; min-height: 35.0px }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #698906 }
span.s1 { color: #4663cc }
span.s2 { color: #698906 }
span.s3 { color: #ad42ef }
span.s4 { color: #a5b2b9 }
span.s5 { color: #4f5d66 }
span.s6 { color: #4a8a01 }
span.s7 { color: #e48b00 }
span.s8 { color: #000000 }
span.s9 { color: #289c97 }
span.s10 { color: #b58a00 }
span.Apple-tab-span { white-space: pre }
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8; //定义小球的半径
var MARGIN_TOP = 60; //每个数字距离画布的上边距的距离
var MARGIN_LEFT = 30; //第一个数字距离画布的左边距的距离
//定制截止时间(月是从0开始数一直到11)
//var endTime = new Date();//(2017,11,23,23,12,52)如果在这个括号里面填上数字,前面的var改成const就是填写的时间到当前时间的差的倒计时,最多只能有99个小时,
//endTime.setTime( endTime.getTime()+3600*1000);//这种算法可以保证每次打开时都是倒计时一小时(1小时=60分钟=3600秒=3600*1000毫秒)
//小时的位置只有两位数,一天有24个小时,最多只能倒计时四天,
//如果需要打破这个限制,可以把小时扩充成三位数,甚至增加
//因为倒计时每一秒的变化,要加上动画的效果,动画的效果要不停的和当前的时间
//做一个比较,为此设计一个全局变量来表示现在倒计时需要有多少秒,毫秒在计算中
//要转换成秒,毫秒的细节是不需要的。
var curShowTimeSeconds = 0; //初始化
//为了储存生成的小球,要设一个数据结构,
var balls = []; //初始化一个空的数组,一旦产生新的小球,就添加在数组里面
//小球是彩色的,需要一个储存颜色的数组
const colors = ["red", "yellow", "lime", "purple", "deeppink",
"springgreen", "blue", "green", "tomato", "turquoise"
]
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;
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;
//调用render函数,传入context参数,获得绘图的上下文环境
curShowTimeSeconds = getCurrentShowTimeSeconds();
setInterval(function() {
render(context); //绘制当前的画面
update(); //根据绘制画面所需要的数据结构,对数据结构进行一定的调整
}, 50);
}
function getCurrentShowTimeSeconds() {
var curTime = new Date(); //获取当前的时间
var ret = curTime.getHours()*3600+ curTime.getMinutes()*60+curTime.getSeconds();
return ret ;
}
//对当前的数据进行调整,处理时间的变化
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;
//判断下一次要显示的时间和当前所显示的时间有没有变化,
//如果有变化,就改变curShowTimeSeconds
if(nextSeconds != curSeconds) {
//如果当前的小时的十位数已经不等于下一次要显示的小时的十位数
if(parseInt(curHours / 10) != parseInt(nextHours / 10)) {
//创建一个新的函数addBalls负责加小球,找到小球的位置,以及相应的数字,生成一系列小球
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();
//数组的元素在不断的增加,但是没有减小,这样的程序是不能长时间运行的,
//每个计算机都有它的极限,,他在不断的占有我们的内存,其实当balls走出我们的画面的时候
//这个小球就可以不留在数组里了,设置一个机制,删除走出画面的数组,这个程序就可以长时间运行了
// console.log(balls.length);//打印balls数组的长度
}
//让新产生的小球动起来
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++) //遍历balls数组
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();
}
}
//实现addBalls()
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) { //如果为1,就添加一个小球
var aBall = {
x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1), //x坐标
y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1), //y坐标
g: 1.5 + Math.random(), //小球的加速度,设置随机的加速度会使小球更加的活泼
vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4, //小球在x方向的速度
vy: -5, //y方向的速度
color: colors[Math.floor(Math.random() * colors.length)]
}
balls.push(aBall);
}
}
//绘制canvas的画布
function render(cxt) {
//对一个矩形的图像进行刷新操作
cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
//先绘制时钟的数值
var hours = parseInt(curShowTimeSeconds / 3600);
var minutes = parseInt((curShowTimeSeconds - hours * 3600) / 60);
var seconds = curShowTimeSeconds % 60;
//一个数字一个数字的绘制时间
renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt)
//15=7*2+1
renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt)
//30=15+15
renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt)
//39=30+(4*2+1)
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();
//计算第(i,j)个圆的圆心的位置:
//(假设开始点是x,y,圆的半径是R,两个圆之间的外边距是2)
//centerX:x+j*2*(R+1)+(R+1);
//centerY:y+i*2*(R+1)+(R+1);
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,制作炫酷的时钟和倒计时的更多相关文章
- 用AI制作炫酷效果
PART1:制作第一个效果 步骤一:新建一个800*600的画布. 骤二:从工具栏选“矩形工具”,创建一个800*600的矩形.白色的是画布,浅红色(我的AI之前保留的填充颜色,每个人都不一样)的是你 ...
- web报表设计器在线制作炫酷图表
相信很多人都看过这些大屏的图表,是不是感觉效果很酷炫,做起来会很复杂,按照传统的方式去做,使用数据分析工具结合ps美化可能耗时要数月才能做出来.但这个时候用Smartbi自助仪表盘功能,全方位的满足各 ...
- Vue + Bootstrap 制作炫酷个人简历(一)
最近看了别人做的简历,简单炫酷,自己非常喜欢,于是打算自己做一个,尝试一下. 由于写这篇随笔的时候才开始动工,所以目前没有成品给大家看. emmm等我更新完会在最后附上成品. 现在 开始! 首先 配置 ...
- vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- 炫酷的时钟--canvas初体验
先啥也不说:来张效果图 我是根据:http://www.imooc.com/learn/133 这里的课程进行学习的.大大的感谢liuyubobobo老师的深入浅出的讲解!! 我在这里仅仅提供我自己的 ...
- Vue + Bootstrap 制作炫酷个人简历(二)
没想到隔了这么久才来更新. 用vue做简历,不是非常适合,为什么呢. 因为简历没什么数据上的操作,一般都是静态的内容. 不过都说了用Vue来做,也只能强行续命了. 这里是我做好的成品 非一般简历 由 ...
- HTML5 Canvas 超炫酷烟花绽放动画教程
这是一个很酷的HTML5 Canvas动画,它将模拟的是我们现实生活中烟花绽放的动画特效,效果非常逼真,但是毕竟是电脑模拟,带女朋友看就算了,效果还是差了点,呵呵.这个HTML5 Canvas动画有一 ...
- css3制作炫酷导航栏效果
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
- 制作炫酷banner js插件,revolution
这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果.. ...
随机推荐
- VBA_Excel_教程:变量,数组
Sub testVar() '变量 Dim strT1 As String strT1 = "A" '常量[加不加类型都可以] Const strT2 As String = &q ...
- 使用jquery获取url以及jquery获取url参数的方法
使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下 1.window.location.href; 其实只是用到了javas ...
- shell字符串判空
主要用到两个命令 -n -z if [ -n "$PID" ]; then echo "PID is not empty" fi if[ -z "$ ...
- jQuery ajax()使用serialize()提交form数据
jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化 <form action="&q ...
- TStringList TMemo Text与Add赋值的区别 Memo.Text赋值高度注意事项,不得不知的技巧。
Memo.Text赋值高度注意事项,不得不知的技巧. list := TStringList.Create; list.Text:= str: list.Count; list.Clear; l ...
- c#基础-oop(面向对象理解)
OOP-面向对象 封装,继承多态 一个桌子,用面向对象来描述一下它这个桌子项目 定义桌子类 对象:桌子 桌子的属性:名字,材质,体积 桌子的方法;放东西(方法) 现在桌子要放书,放花瓶,放文件(这里就 ...
- 内省(Introspector)
内省(Introspector) 是Java 语言对 JavaBean 类属性.事件的一种缺省处理方法 目的:主要用于传递数据信息,这种类中的方法主要用于访问私有的字段(且方法名符合某种命名规则) p ...
- CentOS6.5 Openssl版本升级
CentOS6.5 Openssl 升级: 第一步:在openssl官网(https://www.openssl.org/)下载最新版 Ps:个人使用的是openssl-1.0.1u.tar.gz版 ...
- zabbix3.0.4监控mysql主从同步
zabbix3.0.4监控mysql主从同步 1.监控mysql主从同步原理: 执行一个命令 mysql -u zabbix -pzabbix -e 'show slave status\G' 我们在 ...
- hive中的一些参数
动态分区 设置如下参数开启动态分区:hive.exec.dynamic.partition=true默认值:false描述:是否允许动态分区hive.exec.dynamic.partition.mo ...