let timeId;
let done = true;

function frame() {
    console.info("redraw");
    if(done === true) {
        draw();
    } else {
        clearInterval(timeId);
    }
}
timeId = setInterval(frame, 1000/60);  // 每1000毫秒（每秒）执行60次

let timeId;
let done = false;

function frame() {
    console.info("redraw");
    if(done === true) {
        draw();
        timeId = setTimeout(frame, 20);
    }
}
timeId = setTimeout(frame, 20);  // 20毫秒之后执行loop函数

let done = false;

function frame() {
    console.info("redraw");
    if(done === true) {
        draw();
        requestAnimationFrame(frame);
    }
}
requestAnimationFrame(frame);

let done = false;

function frame() {
    console.info("redraw");
    draw();
}
white (true) {
    if(done === true) {
        frame();
    }
}

let lastTime = Date.now();
// 计算帧率
function calculateFps() {
    let fps = 1000 / (Date.now() - lastTime);
    lastTime = Date.now();
    return Math.round(fps);
}

/**
 * 绘制时钟外观
 */
function drawFacade() {
    // 外圈渐变样式
    const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius+25);
    gradient.addColorStop(0, "rgb(255,255,255)");
    gradient.addColorStop(0.817, "rgb(255,255,255)");
    gradient.addColorStop(0.837, "rgb(237,237,237)");
    gradient.addColorStop(0.874, "rgb(77,77,77)");
    gradient.addColorStop(0.904, "rgb(236,236,236)");
    gradient.addColorStop(0.969, "rgba(77,77,77,168)");
    gradient.addColorStop(1, "rgba(77,77,77,0)");

    // 绘制外圈
    ctx.save();
    ctx.beginPath();
    ctx.arc(x, y, radius+10, 0, 2 * Math.PI);
    ctx.fillStyle = gradient;
    ctx.fill();

    // 绘制中心
    ctx.beginPath();
    ctx.fillStyle = "gray";
    ctx.arc(x, y, 10, 0, 2 * Math.PI)
    ctx.fill();
    ctx.restore();
}

// 绘制时钟刻度
let min = 60;
for (let i = 0; i < min; i++) {
    drawScale(x, y, radius, i);
}

/**
 * 绘制时钟刻度函数
 */
function drawScale(x, y, radius, min) {
    let deg = min * 6;  // 每分钟为6°
    let len = 20;
    ctx.save();
    // 按时钟中心旋转
    ctx.translate(x, y);
    ctx.rotate(toRadians(deg));

    ctx.beginPath();
    // 5的整数分钟的刻度要长一些粗一些
    if (min % 5 == 0) {
        ctx.lineWidth = 4;
        ctx.moveTo(radius - 30, 0);
    } else {
        ctx.lineWidth = 2;
        ctx.moveTo(radius - 20, 0);
    }
    ctx.lineTo(radius - 8, 0);
    ctx.stroke();
    ctx.restore();

    // 每5分钟显示数字值
    if (min % 5 == 0) {
        ctx.save();
        // 按按时钟中心旋转
        ctx.translate(x, y);
        ctx.rotate(toRadians(deg));
        // 平移至文字所在位置，并反向旋转
        ctx.translate(radius - 45, 0);
        ctx.rotate(toRadians(-deg));
        ctx.fillStyle = "red";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.font = "bold 25px 黑体";
        // 
        ctx.fillText((min > 45 ? (min - 45) : (min + 15)) / 5, 0, 0);
        ctx.restore()
    }
} 

// 绘制时针、分针、秒针
drawPointer("h");
drawPointer("m");
drawPointer("s");

function drawPointer(type, value) {
    let deg, beginX, endX;
    let now = new Date();
    ctx.save();

    // 计算时针角度和长度，并设置样式
    if (type == "s") {                    // 秒
        deg = now.getSeconds() * 6 - 90;
        beginX = -30;
        endX = radius - 50;               // 长
        ctx.lineWidth = 4;                // 细
        ctx.strokeStyle = "gold";
    } else if (type == "m") {             // 分
        deg = now.getMinutes() * 6 + ((now.getSeconds() / 60) * 6) - 90;
        beginX = -20;
        endX = radius - 70;
        ctx.lineWidth = 6;
        ctx.strokeStyle = "#2400CC";
    } else {                              // 时
        deg = now.getHours() * 30 + ((now.getMinutes() / 60) * 30) - 90;
        beginX = -15;
        endX = radius - 90;
        ctx.lineWidth = 8;
        ctx.strokeStyle = "#0018CC";
    }

    // 绘制
    ctx.translate(x, y);
    ctx.rotate(toRadians(deg));
    ctx.beginPath();
    ctx.moveTo(beginX, 0);
    ctx.lineTo(endX, 0);
    ctx.stroke();
    ctx.restore();
}

/**
 * 烟花类
 */
class Firework {
    constructor(x, y) {
        this.x = x;
        this.y = y;

        // 火花数
        this.sparkCount = 10;
        // 火花大小
        this.sparkSize = 2;
        // 火花半径
        this.sparkRadius = 10;        
    }

    // 绘制烟花
    draw() {
        for (let i = 0; i < this.sparkCount; i++) {
            let angle = i * 360 / this.sparkCount;
            let cx = this.x + Math.cos(toRadians(angle)) * this.sparkRadius
            let cy = this.y + Math.sin(toRadians(angle)) * this.sparkRadius
            ctx.beginPath();
            ctx.arc(cx, cy, this.sparkSize, Math.PI * 2, false);
            ctx.closePath();
            ctx.fillStyle = "#FF0000";
            ctx.fill();
        }
    }

    // 更新火花大小、位置、透明度
    update() {
        // 火花半径随速度扩散
        this.sparkRadius ++;
        // 火花大小随时间放大
        this.sparkSize = this.sparkSize < 7 ? this.sparkSize + 0.02 : this.sparkSize;
        return this.sparkRadius < 100;
    }
}

<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let fireworks = [];
    let times = 0;

    // 黑色背景
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 帧动画
    function frame() {
        times ++;
        if (times % 6 === 0) {    
            // 绘制黑色背景
            ctx.fillStyle = "rgb(0,0,0)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            drawGrid('lightgray', 0, 0, ctx);

            // 绘制烟花
            for (let i = fireworks.length - 1; i >=0;  i--) {
                fireworks[i].draw();
                if(! fireworks[i].update()){
                    fireworks.splice(i, 1);
                }
            }
        }
        window.requestAnimationFrame(frame);
    }
    window.requestAnimationFrame(frame);

    // 点击画布，产生烟花
    canvas.addEventListener('click', function (e) {
        fireworks.push(new Firework(e.offsetX, e.offsetY));
    });
</script>