console 命令行工具 X clear

console

<html>

<body>
</body>
<script>
	let canvas = document.createElement('canvas');

document.body.appendChild(canvas);
let width=200,height  = 200;
canvas.width = width+40;
canvas.height = height+40;


let ctx = canvas.getContext('2d');
let r = width/2;

main(ctx);
setInterval(()=>{
    canvas.width = canvas.width;
    main(ctx);
},1000)

function main(ctx){

    let now = new Date();
    ctx.translate(canvas.width/2,canvas.height/2);
    drawDial(ctx);
    drawScale(ctx);
    drawText(ctx);
    ctx.shadowOffsetX = 5; 
    ctx.shadowOffsetY = 5; 
    ctx.shadowBlur = 10; 
    ctx.shadowColor = "black";
    drawHourPointer(ctx,now.getHours(),now.getMinutes())
    drawMinute(ctx,now.getMinutes());
    drawSecond(ctx,now.getSeconds())
    drawCirclePoint(ctx);
}

function drawDial(ctx){
    
    ctx.save();
    ctx.shadowOffsetX = 5; 
    ctx.shadowOffsetY = 10; 
    ctx.shadowBlur = 10; 
    ctx.shadowColor = "rgba(0,0,0,0.5)";
    ctx.beginPath();
    ctx.arc(0,0,r,0,2*Math.PI);
    ctx.fillStyle='white';
    ctx.fill();
    ctx.restore();
    
    ctx.save();
    ctx.shadowOffsetX = 2; 
    ctx.shadowOffsetY = 4; 
    ctx.shadowBlur = 4; 
    ctx.shadowColor = "rgba(0,0,0,0.5)";
    ctx.arc(0,0,r,0,2*Math.PI);
    ctx.lineWidth = 5;
    ctx.stroke();
    ctx.restore();
}

// 绘制表盘数字
function drawText(ctx){
    let textR = r-22;
    for(let i=1;i<13;i++){
        ctx.font='14px blod arial'
        ctx.textAlign='center'
        ctx.textBaseline='middle';
        var rad = (2 * Math.PI / 12 * i )-Math.PI / 2;
        var x1 = Math.cos(rad) * textR;
        var y1 = Math.sin(rad) * textR;
        ctx.fillText(i,x1,y1);
    }
}
// 绘制刻度
function drawScale(ctx){
    let textR = r-6;
    for(let i=0;i<60;i++){
        var rad = (2 * Math.PI / 60 * i );
        var x1 = Math.cos(rad) * textR;
        var y1 = Math.sin(rad) * textR;
        ctx.beginPath()
        if(i%5==0){
            var x2 = Math.cos(rad) * (textR-6);
            var y2 = Math.sin(rad) * (textR-6);
            ctx.moveTo(x1,y1);
            ctx.lineTo(x2,y2);
            ctx.lineWidth = 2;
        }else{
            var x2 = Math.cos(rad) * (textR-4);
            var y2 = Math.sin(rad) * (textR-4);
            ctx.moveTo(x1,y1);
            ctx.lineTo(x2,y2);
            ctx.lineWidth = 1;
        }
        ctx.stroke();
    } 
}

// 绘制时针
function drawHourPointer(ctx,hour,minute){
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 12 * hour ;//时针旋转的弧度
    var mrad  = 2 * Math.PI / 12 / 60 * minute;//分针旋转的弧度
    ctx.rotate(rad + mrad);
    ctx.lineWidth = 6 ; //定义时针线的宽度
	ctx.lineCap = "round"; //设置时针线端点为圆的
    ctx.moveTo(0,10); //移动划线的原点到圆点下面一点 
    ctx.lineTo(0,-r/2); //画出这条线
    ctx.stroke(); //最终画出这条时针线
    ctx.restore();//返回之前保存过的路径状态和属性
}

function drawMinute(ctx,minute){
    ctx.save();//保存当前环境的状态
    ctx.beginPath();//画出竖着的那个时针的线
    var rad = 2 * Math.PI / 60 * minute ;//需要旋转的弧度
    ctx.rotate(rad);
    ctx.lineWidth = 3 ;//定义分针线的宽度
    ctx.lineCap = "round";//设置时针线端点为圆的
    ctx.moveTo(0,10); //移动划线的原点到圆点下面一点 
    ctx.lineTo( 0 , -r + 30); //画出这条线
    ctx.stroke(); //最终画出这条时针线
    ctx.restore();//返回之前保存过的路径状态和属性
}

function drawSecond(ctx,second){
    ctx.save();//保存当前环境的状态
    ctx.beginPath();//画出竖着的那个时针的线
    ctx.strokeStyle = "red";//填充为红色
    var rad = 2 * Math.PI / 60 * second ;//需要旋转的弧度
    ctx.rotate(rad);
    ctx.lineWidth = 2 ;//定义分针线的宽度
    ctx.lineCap = "round";//设置时针线端点为圆的
    ctx.moveTo(0,10); //移动划线的原点到圆点下面一点 
    ctx.lineTo( 0 , -r + 30); //画出这条线
    ctx.stroke(); //最终画出这条时针线
    ctx.restore();//返回之前保存过的路径状态和属性
}

function drawCirclePoint(ctx){
    ctx.beginPath();
    ctx.fillStyle='white';
    ctx.arc(0,0,5,0,2*Math.PI);
    ctx.lineWidth = 1;
    ctx.fill();

    ctx.beginPath();
    ctx.strokeStyle='black';
    ctx.arc(0,0,5,0,2*Math.PI);
    ctx.lineWidth = 1;
    ctx.stroke();

}
</script>

</html>

canvas{
    background-color: white;
}