使用html5画一个时钟表

本是古典何须时尚 2022-07-16 11:22 129阅读 0赞

## 效果图 ##

![这里写图片描述][20161017091455921]  
时钟是可以动态显示的，因为是截图，所以看不出秒针、分针的动态

## 1.主体代码 ##

## 2.画背景：最外层的圆、数字、以及秒刻度的点 ##

## 3.画 时针线 ##

function drawHourBar(hours,minutes){
        //计算出时针线的弧度
        var rad = 2*Math.PI/12*hours + Math.PI/6*minutes/60;
        ctx.save();
        ctx.rotate(rad);
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.lineCap="round";
        ctx.moveTo(0,13);
        ctx.lineTo(0,-r/2);
        ctx.closePath();
        ctx.stroke();
        ctx.restore();
    }

## 4.画 分针线 ##

function drawMinuteBar(minutes){
        var rad = 2*Math.PI/60*minutes;
        ctx.save();
        ctx.rotate(rad);
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.lineCap="round";
        ctx.moveTo(0,14);
        ctx.lineTo(0,-r + 39);
        ctx.closePath();
        ctx.stroke();
        ctx.restore();
    }

## 5.画 秒针线 ##

//基本类似上面 分针线的画法
    function drawSecondBar(seconds){
        
        var rad = 2*Math.PI/60*seconds;
        ctx.save();
        ctx.rotate(rad);
        ctx.strokeStyle="#a00";
        ctx.lineWidth = 3;
        //ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.lineCap="round";
        ctx.moveTo(0,14);
        ctx.lineTo(0,-r + 21);
        ctx.closePath();
        ctx.stroke();
        ctx.restore();
    }

## 6.画 原点 ##

function drawDot(){
        
        ctx.beginPath();
        ctx.fillStyle = '#a00';
        ctx.arc(0,0,6,0,2*Math.PI,false);//画出圆心
        ctx.closePath();
        ctx.fill();
    }

## 7.封装上面的函数，并调用，将时钟表绘制出来 ##

function drawAll(){
        
        //清楚上一秒的动作
        ctx.clearRect(0,0,width,height);
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        ctx.save();
        drawBackgroundCircle();//此处多次重绘不必要的背景，可改进
        drawHourBar(hours,minutes);
        drawMinuteBar(minutes);
        drawSecondBar(seconds);
        drawDot();
        ctx.restore();
    }
    //调用所有函数
    drawAll();
    //设置定时器
    setInterval(drawAll,1000);

## 8.整体代码 ##

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>时钟</title>
     </head>
    
        <style type="text/css">
            div{
                text-align:center;
                margin-top:250px;
            }
            #clock{
                border:1px solid #ccc;
            }
        </style>
    
    
     <body>
    
        <div>
            <canvas id="clock" height="300px" width="300px"></canvas>
        </div>
    
        <script type="text/javascript">
            var dom = document.getElementById("clock");
            var ctx = dom.getContext("2d");
            var width = ctx.canvas.width;
            var height = ctx.canvas.height;
            var r = width / 2;
    
            function drawBackgroundCircle(){
         
                ctx.translate(r,r);
                ctx.lineWidth = 6;
                ctx.beginPath();
                ctx.arc(0,0,r - 3,0,2*Math.PI,false);
                ctx.closePath();
                ctx.stroke();
    
                var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];
                ctx.font = '18px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                hourNumbers.forEach(function(number,i){
         
                    var rad = 2*Math.PI/12*i;
                    var x = (r - 30)*Math.cos(rad);
                    var y = (r - 30)*Math.sin(rad);
                    ctx.fillText(number,x,y);
                });
    
                for(var i = 0;i<60;i++){
                    var rad = 2*Math.PI/60*i;
                    var x = (r - 13)*Math.cos(rad);
                    var y = (r - 13)*Math.sin(rad);
                    ctx.beginPath();
                    if(i%5===0){
                        ctx.fillStyle = '#a00';
                        ctx.arc(x,y,4,0,2*Math.PI,false);
                    }else{
                        ctx.fillStyle = '#ccc';
                        ctx.arc(x,y,2,0,2*Math.PI,false);
                    }
                    ctx.closePath();
                    ctx.fill();
                }
            }
    
            function drawHourBar(hours,minutes){
         
                var rad = 2*Math.PI/12*hours + Math.PI/6*minutes/60;
                ctx.save();
                ctx.rotate(rad);
                ctx.lineWidth = 3;
                ctx.beginPath();
                ctx.lineCap="round";
                ctx.moveTo(0,13);
                ctx.lineTo(0,-r/2);
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
            }
    
            function drawMinuteBar(minutes){
         
                var rad = 2*Math.PI/60*minutes;
                ctx.save();
                ctx.rotate(rad);
                ctx.lineWidth = 3;
                ctx.beginPath();
                ctx.lineCap="round";
                ctx.moveTo(0,14);
                ctx.lineTo(0,-r + 39);
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
            }
    
            function drawSecondBar(seconds){
         
                var rad = 2*Math.PI/60*seconds;
                ctx.save();
                ctx.rotate(rad);
                ctx.strokeStyle="#a00";
                ctx.lineWidth = 3;
                //ctx.lineCap = 'round';
                ctx.beginPath();
                ctx.lineCap="round";
                ctx.moveTo(0,14);
                ctx.lineTo(0,-r + 21);
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
            }
    
            function drawDot(){
         
                ctx.beginPath();
                ctx.fillStyle = '#a00';
                ctx.arc(0,0,6,0,2*Math.PI,false);//画出圆心
                ctx.closePath();
                ctx.fill();
            }
    
            function drawAll(){
         
                ctx.clearRect(0,0,width,height);
                var now = new Date();
                var hours = now.getHours();
                var minutes = now.getMinutes();
                var seconds = now.getSeconds();
                ctx.save();
                drawBackgroundCircle();//此处多次重绘不必要的背景，可改进
                drawHourBar(hours,minutes);
                drawMinuteBar(minutes);
                drawSecondBar(seconds);
                drawDot();
                ctx.restore();
            }
            drawAll();
            setInterval(drawAll,1000);
        </script>
     </body>
    </html>

[20161017091455921]: /images/20220716/aeb7580918b148888613701e24cff84d.png