canvas 做出数字倒计时 （彩球掉落效果）

于 2019-03-19 21:12:08 发布
阅读量350 收藏
点赞数
分类专栏： 学习总结 文章标签： canvas html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/deideidei13/article/details/88198000
版权
博客主要涉及HTML和JS相关内容，包含HTML页面代码，以及用于控制形状的JS页面代码，体现了前端开发中利用这两种技术实现特定功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

首先是html页面代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <canvas id="canvas" style="display:block;margin:50px auto;">
        当前浏览器不支持Canvas，请更换浏览器后再试
    </canvas>

    <script src="digit.js"></script>
    <script src="countdown.js"></script>
</body>
</html>

控制形状的js页面

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]
        ]//:
    ];

js页面

//设置全局变量
var window_height = 768;
var window_width = 1024;
var r=8;//半径
//第一个数字外边距
var margin_top=60;
var margin_left=30;

var time=0;
//定义一个数组存放所有滚落的小球
var balls = [];
//定义滚落小球的颜色
var colors=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]
//主方法 开启启动
window.onload=function(){
    window_height=document.body.clientHeight;
    window_width=document.body.clientWidth;

    margin_left=Math.round(window_width/10);
    r=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.height=window_height;
    canvas.width=window_width;
    //通过一个方法取得秒数
    time=gettime();
    //设置动画  调用函数
    setInterval(
        function(){

            update();
            render(context);

        },
        50
    )

}
//更新时间
function update(){
    //获取下一个时间的差值 和当前的差值 作比较  如果不同把给当前的差值赋值为下一时间差值
    var nexttime=gettime();

    var nexthours=parseInt(nexttime/3600);
    var nextmin=parseInt((nexttime-nexthours*3600)/60);
    var nextsec=nexttime%60;
    //和render里时间相同
    var nowhours=parseInt(time/3600);
    var nowmin=parseInt((time-nowhours*3600)/60);
    var nowsec=time%60;
    //如果时间发生改变
    if(nowsec != nextsec){
        //分别判断每个数字是否相同  如果不同 调用函数添加数组
        if(parseInt(nowhours/10) != parseInt(nexthours/10)){
            addballs(margin_left,margin_top,parseInt(nexthours/10));
        }
        if(parseInt(nowhours%10) != parseInt(nexthours%10)){
            addballs(margin_left+15*(r+1),margin_top,parseInt(nexthours%10));
        }
        if(parseInt(nowmin/10) != parseInt(nextmin/10)){
            addballs(margin_left+39*(r+1),margin_top,parseInt(nextmin/10));
        }
        if(parseInt(nowmin%10) != parseInt(nextmin%10)){
            addballs(margin_left+54*(r+1),margin_top,parseInt(nextmin%10));
        }
        if(parseInt(nowsec/10) != parseInt(nextsec/10)){
            addballs(margin_left+78*(r+1),margin_top,parseInt(nextsec/10));
        }
        if(parseInt(nowsec%10) != parseInt(nextsec%10)){
            addballs(margin_left+93*(r+1),margin_top,parseInt(nextsec%10));
        }
        time=nexttime;
    }
        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;
        //如果小球到达屏幕最下方  设置小球的y轴速度为反方向相同速度
        if(balls[i].y >= window_height-r){
            balls[i].y=window_height-r;
            //因为空气中有阻力 所以小球反弹应该加上一定的摩擦力
            balls[i].vy=-balls[i].vy*0.5;
        }
    }
    //因为存放小球的数组balls的长度是不断增长的 占用内存
    //所以把屏幕外部的小球从数组中删除
    var count=0;
    for(var i=0 ; i<balls.length;i++){
        if(balls[i].x+r > 0&&balls[i].x-r < window_width){
            balls[count++]=balls[i];
        }
    }
                        //如果count>300取300  如果count小于300 取count
    while(balls.length>Math.min(300,count)){
        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++){
            //如果当前位置=1 绘制小球
            if(digit[num][i][j]==1){
               var aball = {
                   x:x+2*j*(r+1)+(r+1),
                   y:y+2*i*(r+1)+(r+1),
                   //加速度1.5~2.5
                   g:1.5+Math.random(),
                   vx:Math.pow(-1,Math.ceil(Math.random()*100))*4,
                   vy:-5,
                   color:colors[Math.floor(Math.random()*colors.length)]
                }
                balls.push(aball);
            }
        }
    }
}
//获取当前时间和结束时间的差值
function gettime(){
    //获得当前时间
    var htime=new Date();
    var time=htime.getHours()*3600+htime.getMinutes()*60+htime.getSeconds();
    return time;
}
//得到要绘制的.数字 依次调用renderDigit函数绘制小球
function render(context){
    //清除当前窗口内容 避免多个图案叠加
    context.clearRect(0,0,window_width,window_height);
    //得到要绘制的数字 小时 分钟 秒
    var hours=parseInt(time/3600);
    var min=parseInt((time-hours*3600)/60);
    var sec=time%60;

    //依次绘制
    // 开始坐标 第一个数字parseInt(hours/10) 上下文环境
    renderDigit(margin_left,margin_top,parseInt(hours/10) ,context);
    //第二个数字parseInt(hours%10) 上下文环境
    renderDigit(margin_left+15*(r+1),margin_top,parseInt(hours%10) ,context);

    //第一个冒号
    renderDigit(margin_left+30*(r+1),margin_top,10 ,context);

    renderDigit(margin_left+39*(r+1),margin_top,parseInt(min/10) ,context);
    renderDigit(margin_left+54*(r+1),margin_top,parseInt(min%10) ,context);

    renderDigit(margin_left+69*(r+1),margin_top,10 ,context);

    renderDigit(margin_left+78*(r+1),margin_top,parseInt(sec/10) ,context);
    renderDigit(margin_left+93*(r+1),margin_top,parseInt(sec%10) ,context);

    //循环遍历添加彩色小球
    for(var i=0;i<balls.length;i++){

        context.beginPath();
        context.arc(balls[i].x , balls[i].y ,r , 0 , 2*Math.PI);
        context.fillStyle=balls[i].color;
        context.closePath();
        context.fill();
    }
}

//获得每一个数字的坐标 和 digit下标  根据数值判断是否画小球
function renderDigit(x,y,num,context){
    context.fillStyle="red";
    //遍历每一行
    for(var i = 0 ; i <digit[num].length;i++){
        //遍历每一行的每一个
        for(var j = 0 ; j <digit[num][i].length;j++){
            //如果当前位置=1 绘制小球
            if(digit[num][i][j]==1){
                context.beginPath();
                //开始位置
                /*
                * 圆心位置x  x+2*j*(r+1)+(r+1)
                * 圆心位置y  y+2*i*(r+1)+(r+1)
                * 半径 r 定义
                * */
                context.arc(x+2*j*(r+1)+(r+1),y+2*i*(r+1)+(r+1),r,0,2*Math.PI);
                context.closePath();
                context.fill();
            }
        }
    }
}

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值