canvas--绚丽的时钟效果

参考文档:https://blog.csdn.net/heyan1106yan/article/details/52998285

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>border</title>
<style type="text/css">
</style>
</head>
<bodyn style=" width: 100%; height: 100%;">
<div class="">
     <canvas id="canvas" width="1024" height="768" style=" border: 1px solid #aaa; display: block; margin:100px auto 0"></canvas>      
</div>
<script type="text/javascript" src="digit.js"></script>
<script type="text/javascript" src="countdown.js"></script>
</body>

</html>

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

countdown.js

var WINDOW_WIDTH=document.body.clientWidth;   //若想屏幕自适应则获取屏幕宽高并设置
var WIDTH_HEIGHT=document.body.clientHeight
var RADIUS=Math.round(WINDOW_WIDTH*4/5/108)-1;
var MARGIN_TOP=Math.round(WINDOW_WIDTH/5);
var MARGIN_LEFT=Math.round(WINDOW_WIDTH/10)
var curShowTimeseconds=0
window.οnlοad=function(){
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
canvas.width=WINDOW_WIDTH;
canvas.height=WIDTH_HEIGHT;
curShowTimeseconds=getCurrentShowTimeSeconds();
setInterval(function(){
render(context)
update()
},50);
}
function getCurrentShowTimeSeconds(){
    var curTime=new Date();     
    return curTime
}
function update(){
var nextShowTimeSeconds=getCurrentShowTimeSeconds();
var nexthours=nextShowTimeSeconds.getHours();
var nextminutes=nextShowTimeSeconds.getMinutes();
var nextsecondes=nextShowTimeSeconds.getSeconds();
 
var curhours=curShowTimeseconds.getHours();     
var curminutes=curShowTimeseconds.getMinutes();
var cursecondes=curShowTimeseconds.getSeconds();  
if(nextsecondes!=cursecondes){
if(parseInt(nexthours/10)!=parseInt(nexthours/10)){ //小时
addBalls(MARGIN_LEFT,MARGIN_TOP,parseInt(curhours/10));
}
if(parseInt(nexthours%10)!=parseInt(nexthours%10)){ //小时
addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curhours%10));
}
if(parseInt(nextminutes/10)!=parseInt(curminutes/10)){ //分钟
addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curminutes/10));
}
if(parseInt(nextminutes%10)!=parseInt(curminutes%10)){ //分钟
addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curminutes%10));
}
if(parseInt(nextsecondes/10)!=parseInt(cursecondes/10)){ //秒
addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curminutes/10));
}
if(parseInt(nextsecondes%10)!=parseInt(cursecondes%10)){ //秒
addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curminutes/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>= WIDTH_HEIGHT - balls[i].r){
            balls[i].y = WIDTH_HEIGHT - balls[i].r;
            balls[i].vy = -balls[i].vy * 0.75; 
        }
        
}
   /**
     * 这里进行小球数量的删除
     */
    var count = 0;//保存当前存在在画布上的小球数量
    for(var i = 0;i < balls.length; i++){
        /**
         * @param  {[type]} balls[i].x +  RADIUS > 0  [小球的右边缘大于0]
         * @param {[type]} balls[i].x - RADIUS < WIDDOW_WIDTH  [小球的左边缘小于画布的宽度]
         */
        if(balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH){
            balls[count++] = balls[i];//执行完这步操作之后,前count个元素都是存在在画布上面的小球,count后面的数据就是应该删除的小球
        }
    }
    //删除不在画布上的小球
    /**
     * 为保证一定的运算速率,避免计算机因性能低而计算失误,那么最多只保留300个小球,
     * 因为count的值有可能比300大很多,所以取最小值
     * Math.min(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++){
             if(digit[num][i][j] == 1){
                //定义小球的参数
                var ball = {
                    x:x+j*2*(RADIUS+1)+(RADIUS+1),
                    y: y+i*2*(RADIUS+1)+(RADIUS+1),
                    r:RADIUS,
                    g:1.5 + Math.random(),
                    /**
                     * Math.random() * 1000:0-1000的随机数
                     * Math.ceil(Math.random() * 1000):取整
                     * Math.pow( -1 , Math.ceil(Math.random() * 1000)):-1的多少次方,即是1还是-1
                     */
                    vx:Math.pow( -1 , Math.ceil(Math.random() * 1000)) * 4,
                    vy:-5,
                    color:colors[Math.ceil(Math.random() * colors.length)]
                }
                balls.push(ball);
            }

}
}
}
function render(cxt){
    cxt.clearRect(0,0,WINDOW_WIDTH,WIDTH_HEIGHT)     
    var hours=curShowTimeseconds.getHours();     
    var minutes=curShowTimeseconds.getMinutes();
    var secondes=curShowTimeseconds.getSeconds();
    //console.log(secondes);
    renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt) ;   
    renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);  //MARGIN_LEFT+15*(RADIUS+1)矩阵为7个小球 缩影是14个 半径 为了和左边保持距离所以设置了15
    renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);
    renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);  //冒号:字符占用的是9
    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(secondes/10),cxt);
    renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(secondes%10),cxt);     
         //对小球进行绘制
         //console.log(balls);
    for(var i = 0;i < balls.length ; i++){
       cxt.fillStyle = balls[i].color;
       cxt.beginPath();
       cxt.arc(balls[i].x,balls[i].y,balls[i].r, 0 ,Math.PI*2);
       cxt.closePath();
       cxt.fill();
    }
}
//声明一个存放小球的数组
var balls = [];
//小球颜色数组  
var colors = ['#e83355','#e95cd0','#e133ec','#a033ec','#7d33ec','#3c33ec','#336cec','#33ecdd','#33ec70','#ec6733'];
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();
cxt.arc(x+j*2*( RADIUS+1)+(RADIUS),y+i*2*(RADIUS+1),RADIUS,0,2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值