H5写的时钟

最新推荐文章于 2023-07-26 16:00:48 发布

TAT0_0

最新推荐文章于 2023-07-26 16:00:48 发布

阅读量323

点赞数

文章标签： h5

本文链接：https://blog.csdn.net/yesbuy201701/article/details/73249138

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                background: #000;
            }
            #box{
                background: #fff;
            }
            span{
                background: #fff;
            }
        </style>
    </head>
    <body>
        <canvas id="box" width="400" height="400">
            <span>0.0</span>
        </canvas>
    </body>
    <script>
        var oBox = document.getElementById('box');
        var oc = oBox.getContext('2d');     

        function toDraw(){
            var x = 200;
            var y = 200;
            var r = 150;

            //获取系统时间，把时针变成运动的
            var time = new Date();
            var oHours = time.getHours();
            var oMin = time.getMinutes();
            var oSec = time.getSeconds();

            var oHoursDeg = (-90 + oHours*30+ oMin/60*30)*Math.PI/180;
            var oMinDeg = (-90 + oMin*6+oSec/60*6)*Math.PI/180;
            var oSecDeg = (-90 + oSec*6)*Math.PI/180;

            oc.clearRect(0,0,oBox.width,oBox.height);
            //绘制大圆
            oc.beginPath();

            for(var i=0;i<60;i++){
                oc.moveTo(x,y);
                oc.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);                
            }

            oc.closePath();
            oc.stroke();

            //绘制白圆遮盖，留下60个刻度；

            oc.beginPath();
            oc.fillStyle = 'white';
            oc.moveTo(x,y);
            oc.arc(x,y,r*19/20,0,360*Math.PI/180,false);
            oc.closePath();
            oc.fill();

            //绘制刻度线
            oc.lineWidth = 3;
            oc.beginPath();
            for(var i=0;i<12;i++){
                oc.moveTo(x,y);
                oc.arc(x,y,r,30*i*Math.PI/180,30*(i+i)*Math.PI/180,false);
            }
            oc.closePath();
            oc.stroke();

            //绘制白圆遮盖，留下12个刻度
            oc.beginPath();
            oc.fillStyle = 'white';
            oc.moveTo(x,y);
            oc.arc(x,y,r*18/20,0,360*Math.PI/180,false);
            oc.closePath();
            oc.fill();

            //时针绘制
            oc.lineWidth = 5;
            oc.beginPath();         
            oc.moveTo(x,y);
            oc.arc(x,y,r*10/20,oHoursDeg,oHoursDeg,false);          
            oc.closePath();
            oc.stroke();

            //分钟绘制
            oc.lineWidth = 3;
            oc.beginPath();         
            oc.moveTo(x,y);
            oc.arc(x,y,r*12/20,oMinDeg,oMinDeg,false);          
            oc.closePath();
            oc.stroke();

            //秒针绘制
            oc.lineWidth = 2;
            oc.beginPath();         
            oc.moveTo(x,y);
            oc.arc(x,y,r*15/20,oSecDeg,oSecDeg,false);          
            oc.closePath();
            oc.stroke();

        };
        setInterval(toDraw,1000);
        toDraw();

    </script>
</html>

TAT0_0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5写的时钟

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background: #000; } #box{
复制链接

扫一扫