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;
}