SOURCE

console 命令行工具 X clear

                    
>
console
    window.console.log= function () {

    };
    
    var dom = document.getElementById("clock");
    var ctx = dom.getContext("2d");
    var width = ctx.canvas.width;
    var heidht = ctx.canvas.height;
    var r = width/2;
    var rem = width/200;
    
    //画圆
    function drawBackgroud() {
        //重新定义原点坐标
        ctx.save();
        ctx.translate(r, r);
        ctx.beginPath();
        ctx.lineWidth= 10*rem;
        ctx.arc(0, 0, r -ctx.lineWidth/2 , 0, 2*Math.PI, false);
        ctx.stroke();

        var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

        ctx.font = (18*rem) + 'px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        hourNumbers.forEach(function (number, i) {
            var size = hourNumbers.length;
            var rad = 2 * Math.PI / size * i;
            var x = Math.cos(rad) * (r - 30*rem);
            var y = Math.sin(rad) * (r - 30*rem);

            console.log(rad, 'rad='+i);
            console.log(x, 'x='+i);
            console.log(y, 'y='+i);

            ctx.fillText(number, x, y);
        });

        for(var i=0; i<60; i++){
            var rad = 2*Math.PI/60 * i;
            var x = Math.cos(rad) * (r - 18*rem);
            var y = Math.sin(rad) * (r - 18*rem);
            ctx.beginPath();
            if(i % 5 == 0){
                ctx.fillStyle= '#000';
                ctx.arc(x, y, 2*rem, 0, 2*Math.PI, false);
            }else{
                ctx.fillStyle= '#ccc';
                ctx.arc(x, y, 2*rem, 0, 2*Math.PI, false);
            }
            ctx.fill();
        }
    }

    function drawHour(hour, minute){
        ctx.save();

        ctx.beginPath();
        var rad = 2*Math.PI/12 * hour;
        var mard = 2*Math.PI/12/60 * minute;
        ctx.rotate(rad + mard);
        ctx.lineWidth=6*rem;
        ctx.lineCap='round';
        ctx.moveTo(0, 10*rem );
        ctx.lineTo(0, -r/2);
        ctx.stroke();

        ctx.restore();
    }
    function drawMinute(minute){
        ctx.save();

        var rad = 2*Math.PI/60 * minute;
        ctx.rotate(rad);
        ctx.beginPath();
        ctx.lineWidth=3*rem;
        ctx.lineCap='round';
        ctx.moveTo(0, 10*rem);
        ctx.lineTo(0, -r + 30*rem);
        ctx.stroke();

        ctx.restore();
    }
    function drawSecond(second){
        ctx.save();

        var rad = 2*Math.PI/60 * second;
        ctx.rotate(rad);
        ctx.beginPath();
        ctx.fillStyle='#c14543';
        ctx.moveTo(-2, 20*rem);
        ctx.lineTo(2, 20*rem);
        ctx.lineTo(1, -r+18*rem);
        ctx.lineTo(-1, -r+18*rem);
        ctx.fill();

        ctx.restore();
    }

    function drawDot(){
        ctx.beginPath();
        ctx.fillStyle='#fff';
        ctx.arc(0, 0, 3, 0, 2*Math.PI, false);
        ctx.fill();
    }


    function draw(){
        ctx.clearRect(0, 0, width, heidht);
        var now = new Date();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();

        drawBackgroud();
        drawDot();
        drawHour(hour, minute);
        drawMinute(minute);
        drawSecond(second);
        ctx.restore();

        //递归继续调用
        window.requestAnimationFrame(draw);
    }

    //第一帧
    window.requestAnimationFrame(draw);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clock</title>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    
</head>
<body>

<div class="box">
    <canvas id="clock" height="200px" width="200px"></canvas>
</div>

</body>
</html>
*{
    margin: 0;
    padding: 0;
}
body{
    background: white;
}
.box{
    text-align: center;
    margin-top: 250px;
}
#clock{
    /*border: 1px solid #ccc;*/
}