canvas制作倒计时的绚丽效果
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas倒计时效果</title>
</head>
<body style="height: 100%">
<canvas id="canvas" style="height: 100%">
当前浏览器不支持Canvas,请更换浏览器后再试
</canvas>
<script src="digit.js"></script>
<script src="canvas%20daojishi.js"></script>
</body>
</html>
JS代码
var canvas_width=1024;
var canvas_height=768;
var radius=8;
var margin_top=60;
var margin_left=30;
//const修饰的数据类型是指常类型,常类型的变量或对象的值是不能被更新的 //endtime 截至时间
// const endTime=new Date(2016,10,7,0,0,0); //new date() 不能超过距离现在的99小时 因为小时设定只有两位数 只能99小时 4天 月份0——11
//自动更新时间
var endTime=new Date(); //得到当前的时间
endTime.setTime(endTime.getTime()+3600*1000); //设置当前时间(得到当前时间(毫秒)+1h(3600)s*1000转换为毫秒)
var curShowTimeSeconds=0; //当前时间秒数为0
var balls = []; //小球数组
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];
window.onload=function () {
var canvas=document.getElementById("canvas");
canvas.width=canvas_width;
canvas.height=canvas_height;
var context=canvas.getContext("2d");
//屏幕自适应
// canvas_width=document.body.clientWidth;
// canvas_height=document.body.clientHeight;
//
// margin_left=Math.round(canvas_width/10);
// margin_top=Math.round(canvas_height/5);
//
// radius=Math.round((canvas_width*4/5)/108)-1;
//render这个函数里面有个renderDigit()
//依次绘制时分秒的每个数字,秒的个位数到区域左边的距离是 93*(R+1),
//并且本身一个数的宽度是15*(R+1),
//所以得到了区域总宽为93*(R+1)+15*(R+1)=108*(R+1),
//也就是window_width*4/5 = 108 *(R+1);
curShowTimeSeconds=getCurrentShowTimeSeconds();
// render(context); //渲染 具体绘制 //替换为setInterval()
//动画效果的实现
setInterval(
function () {
render(context); //在画布上描述 //下面已完成
update(); //数据的变化
},50
)
};
//得到当前时间
function getCurrentShowTimeSeconds() {
var curTime=new Date(); //取得当前的时间
var retTime=endTime.getTime()-curTime.getTime(); //倒计时=结束时间-当前时间 //getTime() 得到毫秒数
retTime=Math.round(retTime/1000); //round() 方法可把一个数字舍入为最接近的整数。// ret/1000 把毫秒转换为秒
return retTime>=0? retTime:0; //判断reTime是否>=0 如果是 则返回 ret 否则返回0
}
//数据变化
function update() {
//1.时间变化
var nextShowTimeSeconds=getCurrentShowTimeSeconds(); //得到下一个时间
//下一个时间分解 parseInt()解析一个字符串,并返回一个整数
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;
//2.添加小球位置的变化
if (nextSeconds != curSeconds) { //判断下一个时间是否等于当前的时间//当不等于的时候
//时间变化时,添加小球
//小时
if (parseInt(curHours / 10) != parseInt(nextHours / 10)) {
addBalls(margin_left, margin_top, parseInt(curHours / 10)); //位置 X Y 以及 相应的数字
}
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(); //更新所有的小球
console.log(balls.length); //在控制台打印balls的长度 //不停加长 //解决性能优化
}
function updateBalls() {
//1.(1)小球运动值的变化
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;
//(2).碰撞检测
if (balls[i].y>=canvas_height-radius) {
balls[i].y = canvas_height - radius;
balls[i].vy = -balls[i].vy * 0.7; //0.75摩擦系数 越大越远
}
}
//2.性能优化 删除小球
var cnt=0; //小球数量
for (var i=0;i<balls.length;i++)
//右边缘>0 和 左边缘<canvas.width 说明在画布内 然后放在数组里
if(balls[i].x+radius>0 && balls[i].x-radius<canvas_width)
balls[cnt++] = balls[i];
while (balls.length>Math.min(200,cnt)){ //保留200到cnt之间的最小值
balls.pop(); //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(), //加速度 1.5-2.5 // 不同
//pow() 方法可返回 x 的 y 次幂的值。在这里是 -1的N次幂 // Math.ceil向上取整
// 在X轴上的加速度 //Math.round() 四舍五入取整 //random() 0 ~ 1 之间 随机数。
//1-1000//取整 //取-1 或+1 //*4//-4至+4
vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
vy: -5, //向上抛一点点
//math.floor(x)对浮点数向下取整 //
color: colors[Math.floor(Math.random() * colors.length)] //颜色数组
};
balls.push(aBall); //把小球添加进小球数组里
}
}
//在画布上描述
function render(cxt) {
//clearRect() 方法清空给定矩形内的指定像素 //画布更新 //时间变化不重复
cxt.clearRect(0,0,canvas_width,canvas_height);
//当前的时间
var hours=parseInt(curShowTimeSeconds/3600);
var minutes=parseInt((curShowTimeSeconds-hours*3600)/60); //(现在秒-当前秒 )/60 =分钟
var seconds=curShowTimeSeconds%60; //倒计时具体时间 //%60取余
//定义时间的在画布上的显示位置
renderDigit(margin_left,margin_top,parseInt(hours/10),cxt) ; //小时 //十位数 // 第一位 //起始位置 x y
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) { //传入4个参数 X Y num cxt
cxt.fillStyle="#00ff00"; //定义好颜色
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,0,2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
JS-digit代码
//三维数组
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]
]//:
];