总结-Context

var WIDTH_W = 1024;

var WIDTH_H = 768;

var RADIUS = 8;

var MARGIN_T = 60;

var MARGIN_L = 30;

//var endTime = new Date();

//endTime.setTime(endTime.getTime() + 8 * (3600 * 1000))

var curShowTimeSeconds = 0;

var balls = [];

const colors = ['#33b5e5', '#0099cc', '#aa66cc', '#9933cc', '#99cc00', '#669900', '#ffbb33', '#ff8800', '#ff4444', '#cc0000']

window.onload = function() {

    WIDTH_W = document.body.clientWidth

    WIDTH_H = document.body.clientHeight

    MARGIN_L = Math.round(WIDTH_W / 10);

    MARGIN_T = Math.round(WIDTH_H / 5);

    RADIUS = Math.round(WIDTH_W * 4 / 5 / 108) - 1

    var canvas = document.getElementById("canvas");

    var context = canvas.getContext("2d");

    canvas.width = WIDTH_W;

    canvas.height = WIDTH_H;

    curShowTimeSeconds = getCurrentShowTimeSecond();

    setInterval(

        function() {

            render(context);

            update();

        }, 50

    )

}

function getCurrentShowTimeSecond() {

    var curTime = new Date();

    // var ret = endTime.getTime() - curTime.getTime();

    var ret = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds();

    // ret = Math.round(ret / 1000);

    // return ret >= 0 ? ret : 0;

    return ret

}

function update() {

    var nextShowTimeSeconds = getCurrentShowTimeSecond();

    var nh = parseInt(nextShowTimeSeconds / 3600);

    var nm = parseInt((nextShowTimeSeconds - nh * 3600) / 60);

    var ns = nextShowTimeSeconds % 60;

    var ch = parseInt(curShowTimeSeconds / 3600);

    var cm = parseInt((curShowTimeSeconds - ch * 3600) / 60);

    var cs = curShowTimeSeconds % 60;

    if (ns != cs) {

        if (parseInt(ch / 10) != parseInt(nh / 10)) {

            addBalls(MARGIN_L + 0, MARGIN_T, parseInt(ch / 10));

        }

        if (parseInt(ch % 10) != parseInt(nh % 10)) {

            addBalls(MARGIN_L + 15 * (RADIUS + 1), MARGIN_T, parseInt(ch / 10));

        }

        if (parseInt(cm / 10) != parseInt(nm / 10)) {

            addBalls(MARGIN_L + 39 * (RADIUS + 1), MARGIN_T, parseInt(cm / 10));

        }

        if (parseInt(cm % 10) != parseInt(nm % 10)) {

            addBalls(MARGIN_L + 54 * (RADIUS + 1), MARGIN_T, parseInt(cm % 10));

        }

        if (parseInt(cs / 10) != parseInt(ns / 10)) {

            addBalls(MARGIN_L + 78 * (RADIUS + 1), MARGIN_T, parseInt(cs / 10));

        }

        if (parseInt(cs % 10) != parseInt(ns % 10)) {

            addBalls(MARGIN_L + 93 * (RADIUS + 1), MARGIN_T, parseInt(cs % 10));

        }

        curShowTimeSeconds = nextShowTimeSeconds;

    }

    updateBalls();

    console.log(balls.length)

}

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_H - RADIUS) {

            balls[i].y = WIDTH_H - 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 < WIDTH_W)

            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,

                    vy: -5,

                    color: colors[Math.floor(Math.random() * colors.length)]

                }

                balls.push(aBall)

            }

        }

    }

}

function render(cxt) {

    cxt.clearRect(0, 0, WIDTH_W, WIDTH_H)

    var h = parseInt(curShowTimeSeconds / 3600);

    var m = parseInt((curShowTimeSeconds - h * 3600) / 60);

    var s = curShowTimeSeconds % 60;

    renderDigit(MARGIN_L, MARGIN_T, parseInt(h / 10), cxt)

    renderDigit(MARGIN_L + 15 * (RADIUS + 1), MARGIN_T, parseInt(h % 10), cxt)

    renderDigit(MARGIN_L + 30 * (RADIUS + 1), MARGIN_T, 10, cxt)

    renderDigit(MARGIN_L + 39 * (RADIUS + 1), MARGIN_T, parseInt(m / 10), cxt)

    renderDigit(MARGIN_L + 54 * (RADIUS + 1), MARGIN_T, parseInt(m % 10), cxt)

    renderDigit(MARGIN_L + 69 * (RADIUS + 1), MARGIN_T, 10, cxt)

    renderDigit(MARGIN_L + 78 * (RADIUS + 1), MARGIN_T, parseInt(s / 10), cxt)

    renderDigit(MARGIN_L + 93 * (RADIUS + 1), MARGIN_T, parseInt(s % 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) {

    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 + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);

                cxt.closePath();

                cxt.fill();

            }

        }

    }

}

html

<canvas id="canvas"></canvas>

js

var canvas = document.getElementById('canvas')得到canvas

var context = canvas.getContext('2d')获取上下文绘图环境

context

context.moveTo(x,y)

context.lineTo(x,y)设置路径

context.arc(cx,cy,r,sAng,eAng,true/false)绘制圆形或弧

context.beginPath()

context.closePath()表示一个状态/结束路径

context.lineWidth路径粗细

context.strokeStyle路径颜色

context.fillStyle填充色块颜色

context.stroke() 绘制路径

context.fill() 绘制填充色块

context.clearRect(x,y,width,height)对一个指定的矩形区域内的图像进行刷新

context.canvas 获取对应的上下文绘图环境

convas.width设置画布的宽

convas.height设置画布的高

canvas.getContext('2d')得到绘图环境

基本的动画制作方法Animation