js代码

function drawCircle(id){
    var canvas = document.getElementById(id);
    if(canvas == null) return false;
    var context = canvas.getContext('2d');
    canvas.width = 1000;
    canvas.height = 1000;
    //时钟
    context.clearRect(0,0,canvas.width,canvas.height);
    var now = new Date();
    var hours = now.getHours();
    var mins = now.getMinutes();
    var sec = now.getSeconds();
    
    context.save();
    context.translate(0,500);
    context.fillStyle = '#ff0';
    context.strokeStyle = '#eee';
    context.font = 'bold 35px 微软雅黑';
    context.strokeText('系统当前时间为：'+hours+'时'+mins+'分'+sec+'秒',100,100);
    context.fillText('系统当前时间为：'+hours+'时'+mins+'分'+sec+'秒',100,100);
    context.restore();
    
    //24时转换为12时
    hours = hours>12?hours-12:hours;
    
    //画表盘
    context.beginPath();
    context.lineWidth=10;
    context.strokeStyle = '#ff00ff';
    context.arc(300,300,200,0,Math.PI*2,false);
    context.stroke();
    context.closePath();
    
    //画刻度
    //时刻度
    for(var i=0;i<12;i++){
        context.save();
        context.translate(300,300);
        context.lineWidth = 7;
        context.strokeStyle = '#999999';
        context.rotate(i*30*Math.PI/180);
        
        context.beginPath();
        context.moveTo(0,-170);
        context.lineTo(0,-190)
        
        context.stroke();
        context.restore();
        
    }
    //分刻度
    for(var j=0;j<60;j++){
        context.save();
        context.translate(300,300);
        context.lineWidth = 5;
        context.strokeStyle = '#999999';
        context.rotate(j*6*Math.PI/180);
        
        context.beginPath();
        context.moveTo(0,-180);
        context.lineTo(0,-190)
        
        context.stroke();
        context.restore();
    }
    
    //时针
    context.save();
    context.translate(300,300);
    context.lineWidth = 7;
    context.strokeStyle = '#000000';
    context.rotate((hours+mins/60)*30*Math.PI/180);
    context.beginPath();
    context.moveTo(0,15);
    context.lineTo(0,-110)
    context.stroke();
    context.closePath();
    context.restore();
    
    //分针
    context.save();
    context.translate(300,300);
    context.lineWidth = 5;
    context.strokeStyle = '#333333';
    context.rotate((mins+sec/60)*Math.PI/30);
    context.beginPath();
    context.moveTo(0,15);
    context.lineTo(0,-130)
    context.stroke();
    context.closePath();
    context.restore();
    
    //秒针
    context.save();
    context.translate(300,300);
    context.lineWidth = 3;
    context.strokeStyle = '#dd0000';
    context.rotate(sec*Math.PI/30); 
    context.beginPath();
    context.moveTo(0,20);
    context.lineTo(0,-145)
    context.stroke();
    context.closePath();
    
    //圆心
    context.lineWidth = 6;
    context.fillStyle = '#fefefe';
    context.beginPath();
    context.arc(0,0,6,0,Math.PI*2,false);
    context.stroke();
    context.fill();
    context.closePath();
    
    //外圆
    context.beginPath();
    context.arc(0,-125,4,0,Math.PI*2,false);
    context.stroke();
    context.fill();
    context.closePath();
    context.restore();
    
    
}
drawCircle('cav');
setInterval(function(){
    drawCircle('cav');
},1000);

html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css" />
    </head>
    <canvas id="cav"></canvas>
    <script src="index.js"></script>
</html>

效果