console 命令行工具 X clear

console

let canvas = document.querySelector('#canvas');

if(canvas.getContext){
    
    let ctx = canvas.getContext('2d')
    let width = canvas.width;
    let height = canvas.height;

    let x = 0;
    let y = 0;
    
    let length = 60; // 表针长度

    setInterval(()=>{
        canvas.width = canvas.width;    
        drawBase(ctx);

        ctx.beginPath();
        ctx.moveTo(0,0);
        let r = 80;
        let nowSeconds = new Date().getSeconds();
        // let angle = (360/60)*nowSeconds;
        let angle = -20;
        var rad = 2 * Math.PI / 60 * nowSeconds;
        var x1 = Math.cos(rad) * r;
        var y1 = Math.sin(rad) * r;
    
        ctx.lineTo(x1, y1);
        ctx.lineJoin='round'
        ctx.strokeStyle='red'
        ctx.lineWidth=1;
        ctx.stroke();

    },1000)
   

// 绘制表盘及时针和分针；
function drawBase(ctx){
    let redius = 100;
    let gap = 6;
    ctx.translate(width/2,height/2);
    
    ctx.beginPath()
    ctx.arc(x,y,redius,0,Math.PI*2);
    
    ctx.moveTo(x+redius-gap,y);
    ctx.arc(x,y,redius-gap,0,Math.PI*2);
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath()
    ctx.arc(x,y,5,0,Math.PI*2);
    ctx.fill();
    ctx.closePath();

    // 绘制文本
    ctx.font = 'bold 14px Arial'
    ctx.textAlign = 'center'
    ctx.textBaseline='middle'
    ctx.fillText('12',0,0-length-20)

    for(let i = 0;i<12;i++){
        ctx.rotate(Math.PI*2/12)
        ctx.fillText(i+1,0,0-length-20)
    }

    ctx.beginPath();
    ctx.moveTo(0-length,0)
    ctx.lineTo(0,0);
    ctx.lineTo(0,0-length-10);
    ctx.lineJoin='round'
    ctx.lineWidth=5

    ctx.stroke();

}












}else{
    console.wran("canvas.getContext is undefined")
}

<html>
    <body>
	绘制一个钟表
    <div>
        
    </div>
    <canvas id='canvas' width="300" height="300"></canvas>
</body>
</html>

#canvas{
    background-color:white;
}