console 命令行工具 X clear
console
<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    var x = 100,
        y = 100,
        r = 100
    function writeClock(){
    // 秒针刻度
    for(var i = 0; i < 60; i++){
        ctx.beginPath()
        ctx.moveTo(x,y)
        ctx.arc(100,100,100,6*i*Math.PI/180,6*(i + 1)*Math.PI/180,false)
        ctx.moveTo(x,y)
        ctx.stroke()
    }

    
    ctx.beginPath()
    ctx.arc(100,100,95,0,2*Math.PI)
    ctx.fillStyle = "white"
    ctx.fill()

    // 画小时刻度
   ctx.beginPath()
   for(var i = 0; i < 12; i++){
        ctx.beginPath()
        ctx.moveTo(x,y)
        ctx.arc(100,100,100,30*i*Math.PI/180,30*(i + 1)*Math.PI/180,false)
        ctx.moveTo(x,y)
        ctx.stroke()
    }

    ctx.beginPath()
    ctx.arc(100,100,85,0,2*Math.PI)
    ctx.fillStyle = "white"
    ctx.fill()

    
       // 获取当前时间
        var date = new Date()
        var hh = date.getHours()
        var mm = date.getMinutes()
        var ss = date.getSeconds()

        console.log(hh,mm,ss)
        // 对应的幅度值
        var hhVal = (-90 + 30*hh + mm/2)*Math.PI/180
        var mmVal = (-90 + 6*mm)*Math.PI/180
        var ssVal = (-90 + 6*ss)*Math.PI/180

    //画指针
        //时针
        ctx.beginPath()
        ctx.lineWidth = '5'
        ctx.moveTo(x,y)
        ctx.arc(x,y,r/2,hhVal,hhVal)
        ctx.closePath()
        ctx.stroke()

        //分针
        ctx.beginPath()
        ctx.lineWidth = '3'
        ctx.moveTo(x,y)
        ctx.arc(x,y,r/1.7,mmVal,mmVal)
        ctx.moveTo(x,y)
        ctx.closePath()
        ctx.stroke()

        //秒针
        ctx.beginPath()
        ctx.lineWidth = '1'
        ctx.moveTo(x,y)
        ctx.arc(x,y,r/1.4,ssVal,ssVal)
        ctx.closePath()
        ctx.stroke()
    }

    setInterval(writeClock,1000)
</script>

</body>
</html>