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; //第一个数字距离画布的左边距的距离

//定制截止时间(月是从０开始数一直到１１)

//var endTime = new Date();//（2017,11,23,23,12,52）如果在这个括号里面填上数字，前面的ｖａｒ改成ｃｏｎｓｔ就是填写的时间到当前时间的差的倒计时，最多只能有９９个小时，

//endTime.setTime( endTime.getTime()+3600*1000);//这种算法可以保证每次打开时都是倒计时一小时（１小时＝６０分钟＝３６００秒＝３６００*１０００毫秒）

//小时的位置只有两位数，一天有２４个小时，最多只能倒计时四天，

//如果需要打破这个限制，可以把小时扩充成三位数，甚至增加

//因为倒计时每一秒的变化，要加上动画的效果，动画的效果要不停的和当前的时间

//做一个比较，为此设计一个全局变量来表示现在倒计时需要有多少秒，毫秒在计算中

//要转换成秒，毫秒的细节是不需要的。

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++) //遍历ｂａｌｌｓ数组

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) { //如果为１，就添加一个小球

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);

}

}

//绘制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，两个圆之间的外边距是２）

//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()

}

}

时间： 2024-10-16 09:09:58

canvas，制作炫酷的时钟和倒计时的相关文章

如何制作炫酷的热力图

如何制作炫酷的热力图 来自:http://mp.weixin.qq.com/s/s85vBmTv1GdzozQMWjY6xA 2017-11-07 ArcGIS带你飞    飞言飞语  Attention  “热力图”是描述趋势变化强力武器,可以将报告内容瞬间提升一个档次,不过,制作“热力图”并不难,你只需掌握—— 核密度工具 工具简历 核密度分析 英文名:Kernel Density 地址:空间分析» 密度工具 » 核密度分析   作用:计算每个输出栅格像元周围的点要素的密度. 核密度分析可用

Web前端制作炫酷特效和动态icon

1.box-shadow属性除了常用于阴影效果.卡片等基础使用外,还可以用于实现比较炫酷的特效: 类似这样的想过都是可以通过box-shadow属性制作的:资料来源于CSDN:很小白的小白 附上他的代码, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&q

制作炫酷的专题页面

很多时候,我们需要一些炫酷的动画效果,让页面更加吸引用户的眼球,现有比较好用的JS动画库有:velocity和GSAP(支持falsh和js).今天这里主要学习的是velocity配合css3动画,快速打造属于你的专题页面. PS:发现各种炫酷的效果都是由这些简单的动作通过组合实现的,发现最终效果和动画的设计者有很大关系,鄙人就属于那种不怎么懂设计的人,这里只是抛砖引玉. 虽然我今天不准备详细介绍GSAP这个动画库,但是还有有必要把相关资源的入口放在这里,供想要了解的 同学进行深入的 学习. 特

制作炫酷banner js插件,revolution

这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution. HTML Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件. <script src="js/jque

css3制作炫酷导航栏效果

今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简单. (1)使用ul标签布局 (2)鼠标经过事件 <div id="demo1"> <ul> <li>Home</li> <li>Content</li> <li>Service</li> &l

css3制作炫酷导航栏效果 &lt;转&gt;

今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简单. (1)使用ul标签布局 (2)鼠标经过事件 <div id="demo1"> <ul> <li>Home</li> <li>Content</li> <li>Service</li> &l

使用velocity.js制作炫酷滚动效果页面

Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换.转换(transform).循环.缓动.CSS切换.Scroll功能,它是jQuery. jQuery UI.CSS变换 在动画方面的最佳组合. 课程链接:http://www.gbtags.com/gb/gbliblist/127.htm

html5炫酷购物车结算动画特效

这是一款效果十分炫酷的html5购物车结算动画特效插件.该购物车结算动画提供了4种效果,每种效果都使用CSS3来制作炫酷的动画特效,这些效果使用户的购物结算体验大大的增强了. 在线演示:http://www.htmleaf.com/Demo/201501231255.html 下载地址 :http://www.htmleaf.com/html5/html5muban/201501231254.html

Android开发必知--WebView加载html5实现炫酷引导页面

大多数人都知道,一个APP的引导页面还是挺重要的,不过要想通过原生的Android代码做出一个非常炫酷的引导页相对还是比较复杂的,正巧html5在制作炫酷动画网页方面比较给力,我们不妨先利用html5做出手机引导页面,然后将其嵌入APP中. 首先我们分析一下,都需要做哪些工作? 1.制作html5引导页面. 2.把做好的页面放入Android工程中assets文件夹下. 3.利用WebView加载asset文件夹下的html文件. 4.在引导页最后一页的按钮上捕捉点击事件,结束引导页,进入程序.