SOURCE

console 命令行工具 X clear

                    
>
console
var c1 = document.getElementById('c1');
var context = c1.getContext('2d');
var start = 0;
var centerX=150,centerY=150;
context.imageSmoothingEnabled = true;
//绘制扇型
function drawArc(color,per){
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.save();
    context.fillStyle=color;
    context.arc(centerX, centerY, 140.5, Math.PI / 180 * 360*start, Math.PI / 180 * 360*(per+start), false);
    start +=per; 
    context.fill();
    context.closePath();
}
//绘制中心圆
function drawCenter(){    
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.fillStyle='#fff';
    context.arc(centerX, centerY, 20.5, Math.PI / 180 * 0, Math.PI / 180 * 360, false);
    context.fill();
    context.closePath();
}
//绘制圆形入口
function drawBase(time){
    start = 0;
    drawArc('#FDB128',0.2)
    drawArc('#F46950',0.3)
    drawArc('#1DAC91',0.5*time/60)
    drawCenter()
}
//绘制指针
function drawNeedle(time){
    context.beginPath();
    context.lineWidth = 4;
    context.strokeStyle = '#e6e6e6';
    context.translate(centerX, centerY);
    // 绘制指针
    context.rotate((time-30)*Math.PI/30);
    context.lineCap = 'round';
    context.moveTo(0, 0);
    context.lineTo(0, 140);
    context.stroke();
    context.restore();
}
// 时针分钟指针
function drawByTime(time) {
    context.save();
    context.clearRect(-centerX, -centerY, centerX*2, centerY*2);
    context.clearRect(0, 0, centerX*2, centerY*2);

    drawBase(time);
    drawNeedle(time)
}
// 一秒更新一次
setInterval(function() {
    drawByTime(new Date().getSeconds());
}, 1000);
<canvas id="c1" width="500px" height="600px">
	<span>不支持canvas浏览器</span>
</canvas>
canvas {
  image-rendering: optimizeSpeed;
}