》》时钟

最新推荐文章于 2025-06-24 06:29:30 发布

weixin_33961829

最新推荐文章于 2025-06-24 06:29:30 发布

阅读量47

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/1007573044qqcom/p/7991057.html

本文介绍如何使用HTML5的Canvas API来绘制一个带有小时标记和分钟标记的动态时钟。通过JavaScript控制，实现了时钟指针的实时更新，并展示了如何设置画布、绘制圆形边框、填充数字及标记等。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>时钟</title>    
</head>
<body>
    
    <canvas id="canvas" width="400" height="400"></canvas>
    
    
</body>
<script>
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var width=canvas.width;
    var height=canvas.height;
    var r=width/2;
    function draw(){
        ctx.save();
        ctx.translate(r,r);
        ctx.beginPath();
        ctx.lineWidth=10;
        ctx.arc(0,0,r - 5,0,2*Math.PI,false);
        ctx.strokeStyle="red";
        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 rab=2*Math.PI/12*i;
            var x=Math.cos(rab)*(r - 30);
            var y=Math.sin(rab)*(r - 30);
            ctx.fillText(number,x,y);
        });
        for (var i=0;i<60;i++){
            var rad=2*Math.PI/60*i;
            var x=Math.cos(rad)*(r-18);
            var y=Math.sin(rad)*(r-18);
            ctx.beginPath();
            if(i%5===0){
                ctx.fillStyle="#000";
            ctx.arc(x,y,2,0,2*Math.PI,false);
            }else{
                ctx.fillStyle="#ccc";
                ctx.arc(x,y,2,0,2*Math.PI,false);
            }
            ctx.fill();
        }
     }
    function drawhour(hour,minute){
        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle="blue";
        var rab=2*Math.PI/12*hour;
        var mrab=2*Math.PI/12/60*minute;
        ctx.rotate(rab+mrab);
        ctx.lineWidth=6;
        ctx.lineCap="round";
        ctx.moveTo(0,10);
        ctx.lineTo(0,-r/2);
        ctx.stroke();
        ctx.restore();
            
    }
    function drawminute(minute){
        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle="green";
        var rab=2*Math.PI/60*minute;
        ctx.rotate(rab);
        ctx.lineWidth=3;
        ctx.lineCap="round";
        ctx.moveTo(0,10);
        ctx.lineTo(0,-r+30);
        ctx.stroke();
        ctx.restore();
    }
    
    function drawSecond(second){
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle="red";
        var rab=2*Math.PI/60*second;
        ctx.rotate(rab);
        ctx.moveTo(-2,20);
        ctx.lineTo(2,20);
        ctx.lineTo(1,-r+18);
        ctx.lineTo(-1,-r+18);
        ctx.fill();
        ctx.restore();
    }
    function drawDot(){
        ctx.beginPath();
        ctx.fillStyle="#fff";
        ctx.arc(0,0,3,0,2*Math.PI,false);
        ctx.fill();
        
    }
    
    function drawP(){
        ctx.clearRect(0,0,width,height);
        var now=new Date();
        var hour=now.getHours();
        var minute=now.getMinutes();
        var second=now.getSeconds();
        draw();
        drawhour(hour,minute);
        drawminute(minute);
        drawSecond(second);
        drawDot();
        ctx.restore();
    }
    drawP();
    setInterval(drawP,1000);
        
</script>


</html>