SOURCE

var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0400";


function t(r, t) {
    cxt.beginPath();
    cxt.moveTo(20 + 120 * r, 10 + 200 * t);
    cxt.lineTo(120 + 120 * r, 10 + 200 * t);
    cxt.lineTo(100 + 120 * r, 30 + 200 * t);
    cxt.lineTo(40 + 120 * r, 30 + 200 * t);
    cxt.closePath();
    cxt.fill();
}
function tl(r, t) {
    cxt.beginPath();
    cxt.moveTo(14 + 120 * r, 16 + 200 * t);
    cxt.lineTo(38 + 120 * r, 40 + 200 * t);
    cxt.lineTo(38 + 120 * r, 80 + 200 * t);
    cxt.lineTo(25 + 120 * r, 100 + 200 * t);
    cxt.lineTo(15 + 120 * r, 90 + 200 * t);
    cxt.closePath();
    cxt.fill();
}
function tr(r, t) {
    cxt.beginPath();
    cxt.moveTo(126 + 120 * r, 16 + 200 * t);
    cxt.lineTo(126 + 120 * r, 90 + 200 * t);
    cxt.lineTo(116 + 120 * r, 100 + 200 * t);
    cxt.lineTo(102 + 120 * r, 80 + 200 * t);
    cxt.lineTo(102 + 120 * r, 40 + 200 * t);
    cxt.closePath();
    cxt.fill();
}
function center(r, t) {
    cxt.beginPath();
    cxt.moveTo(39 + 120 * r, 92 + 200 * t);
    cxt.lineTo(101 + 120 * r, 92 + 200 * t);
    cxt.lineTo(108 + 120 * r, 102 + 200 * t);
    cxt.lineTo(101 + 120 * r, 112 + 200 * t);
    cxt.lineTo(39 + 120 * r, 112 + 200 * t);
    cxt.lineTo(32 + 120 * r, 102 + 200 * t);
    cxt.closePath();
    cxt.fill();
}
function bl(r, t) {
    cxt.beginPath();
    cxt.moveTo(25 + 120 * r, 104 + 200 * t);
    cxt.lineTo(39 + 120 * r, 124 + 200 * t);
    cxt.lineTo(39 + 120 * r, 162 + 200 * t);
    cxt.lineTo(14 + 120 * r, 192 + 200 * t);
    cxt.lineTo(14 + 120 * r, 116 + 200 * t);
    cxt.closePath();
    cxt.fill();
}
function br(r, t) {
    cxt.beginPath();
    cxt.moveTo(116 + 120 * r, 104 + 200 * t);
    cxt.lineTo(126 + 120 * r, 116 + 200 * t);
    cxt.lineTo(126 + 120 * r, 192 + 200 * t);
    cxt.lineTo(102 + 120 * r, 162 + 200 * t);
    cxt.lineTo(102 + 120 * r, 124 + 200 * t);
    cxt.closePath();
    cxt.fill();
}
function b(r, t) {
    cxt.beginPath();
    cxt.moveTo(40 + 120 * r, 174 + 200 * t);
    cxt.lineTo(100 + 120 * r, 174 + 200 * t);
    cxt.lineTo(120 + 120 * r, 198 + 200 * t);
    cxt.lineTo(20 + 120 * r, 198 + 200 * t);
    cxt.closePath();
    cxt.fill();
}
//画8
function all(r, top) {
    t(r, top)
    tl(r, top)
    tr(r, top)
    center(r, top)
    bl(r, top)
    br(r, top)
    b(r, top)
}
//画0
function draw0(r, top) {
    t(r, top)
    tl(r, top)
    tr(r, top)
    bl(r, top)
    br(r, top)
    b(r, top)
}
//画1
function draw1(r, top) {
    //   t(r, top)
    // tl(r, top)
    tr(r, top)
    // bl(r, top)
    br(r, top)
    // b(r, top)
}
//画2
function draw2(r, top) {
    t(r, top)
    tr(r, top)
    center(r, top)
    bl(r, top)
    b(r, top)
}
//画3
function draw3(r, top) {
    t(r, top)
    tr(r, top)
    center(r, top)
    br(r, top)
    b(r, top)
}
//画4
function draw4(r, top) {
    tl(r, top)
    tr(r, top)
    center(r, top)
    br(r, top)
}
//画5
function draw5(r, top) {
    t(r, top)
    tl(r, top)
    center(r, top)
    br(r, top)
    b(r, top)
}
//画6
function draw6(r, top) {
    t(r, top)
    tl(r, top)
    center(r, top)
    bl(r, top)
    br(r, top)
    b(r, top)
}
//画7
function draw7(r, top) {
    t(r, top)
    tl(r, top)
    tr(r, top)
    br(r, top)
}
//画9
function draw9(r, top) {
    t(r, top)
    tl(r, top)
    tr(r, top)
    center(r, top)
    br(r, top)
    b(r, top)
}


all(3, 1)
draw0(0, 0)
draw1(1, 0)
draw2(2, 0)
draw3(3, 0)
draw4(4, 0)
draw5(0, 1)
draw6(1, 1)
draw7(2, 1)
draw9(4, 1)
let n = parseInt(Math.random() * 1000 + 0);//随机生成整形数
let i = 0
setInterval(() => {
     cxt.clearRect(0,400,620,620);
     cxt.fillStyle = "#Fff";  
    i++
    if (i >= n) {
        i = 0
    }

    let arr = String(i).split('');
    arr.forEach((item, index) => {
        if (item === '0') {
            draw0(index, 2)
        }else  if (item === '1') {
            draw1(index, 2)
        }else  if (item === '2') {
            draw2(index, 2)
        }else  if (item === '3') {
            draw3(index, 2)
        }else  if (item === '4') {
            draw4(index, 2)
        }else  if (item === '5') {
            draw5(index, 2)
        }else  if (item === '6') {
            draw6(index, 2)
        }else  if (item === '7') {
            draw7(index, 2)
        }else  if (item === '8') {
            all(index, 2)
        }else  if (item === '9') {
            draw9(index, 2)
        }

    })
}, 50)

<canvas id="myCanvas" width="620" height="720"></canvas>

canvas{
    background-color: #333;
}