码迷，mamicode.com
首页 > 其他好文 > 详细

canvas小球 时间倒计时demo-优化

时间：2017-06-07 12:34:58      阅读：191      评论：0      收藏：0      [点我收藏+]

标签：alt   canvas   type   ++   ext   win   nbsp   utf-8   func   

技术分享 
<!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>
View Code
技术分享 
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,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,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-优化

标签：alt   canvas   type   ++   ext   win   nbsp   utf-8   func   

原文地址：http://www.cnblogs.com/dongxiaolei/p/6956226.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！