HTML5 Canvas学习之路（六）

一个炫酷的计时器

在慕课网看到一个canvas的课，感觉很炫酷，就把它看完了，然后记下来。
http://www.imooc.com/learn/133

第一步：绘制要显示的时间

拿小球来绘制具体的数字，具体的信息存储在一个三维数组里。具体绘制小球的代码如下：

function renderDigit(x,y,num,ctx) {

    ctx.fillStyle = '#3a48ab';

    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){
                ctx.beginPath();
                ctx.arc(x+2*j*(RADIUS+1)+(RADIUS+1),y+2*i*(RADIUS+1)+(RADIUS+1),
                    RADIUS,0,2*Math.PI);
                ctx.closePath();
                ctx.fill();
            }
        }
    }

第二步：绘制倒计时效果

function render(ctx) {

    ctx.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGH);


    var hours = parseInt(curShowTimeSeconds / 3600);
    var minutes = parseInt((curShowTimeSeconds - hours*3600) / 60);
    var seconds = 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+30*(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+69*(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 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_HEIGH - RADIUS){
            balls[i].y = WINDOW_HEIGH - RADIUS;
            balls[i].vy = -balls[i].vy*0.75;
        }
    }
}

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+2*j*(RADIUS+1)+(RADIUS+1),
                    y:y+2*i*(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);
            }
        }
    }
}

最后，实现效果如下: