码迷,mamicode.com
首页 > Web开发 > 详细

js绘制时钟

时间:2019-09-15 19:03:04      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:支持   etc   cse   cond   bsp   ntb   lock   round   lang   

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas绘制时钟Demo</title>
    <style>
        #myCanvas{
            border: 1px solid;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="400">
        很抱歉,你的浏览器不支持canvas元素
    </canvas>
    <script>
        var c = document.getElementById(‘myCanvas‘);//获取Canvas对象
        var ctx = c.getContext(‘2d‘);//获取上下文
        function drawClock()
        {
            ctx.clearRect(0,0, c.width, c.height);//清除画布
            c.width = c.width;//清除画布时需要重置宽度,否则会有一个画布的重叠
            var x = 250,y = 200,r = 180;//定义圆盘的中心坐标和圆盘的半径
            /*获取实际的时间*/
            var objTime = new Date();
            var objHour = objTime.getHours();
            var objMin = objTime.getMinutes();
            var objSen = objTime.getSeconds();
            /*将时间转换为具体的弧度*/
            /*
             * 因为时钟是从12点的位置算作开始,但是canvas是3点钟的位置算作0度,所以-90度指向12点方向
             * 时针是每小时相隔30度,objMin/2是为了做出当分针过半时,时针也相应的处于两个小时之间
             * 分针和秒针是每次相隔6度
             */
            var arcHour = (-90+objHour*30 + objMin/2)*Math.PI/180;
            var arcMin = (-90+objMin*6)*Math.PI/180;//角度*Math.PI/180  表示弧度
            var arcSen = (-90+objSen*6)*Math.PI/180;
            /*绘制圆盘*/
            ctx.beginPath();
            for(var i=0;i<60;i++)//一共360度,一共60分钟,每分钟相隔6度,360/6=60
            {
                ctx.moveTo(x,y);
                ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
            }
            ctx.closePath();
            ctx.stroke();
            /*绘制白盘来盖住下面的线*/
            ctx.fillStyle = ‘white‘;
            ctx.beginPath();
            ctx.arc(x,y,r*19/20,0,360*Math.PI/180,false);//半径取值为r的20分之19
            ctx.closePath();
            ctx.fill();
            /*依葫芦画瓢,制作每一个小时的线*/
            /*绘制圆盘*/
            ctx.beginPath();
            ctx.lineWidth = 3;
            for(var i=0;i<12;i++)//一共360度,一共12个小时,每小时相隔30度,360/30=12
            {
                ctx.moveTo(x,y);
                ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
            }
            ctx.closePath();
            ctx.stroke();
            /*绘制白盘来盖住下面的线*/
            ctx.fillStyle = ‘white‘;
            ctx.beginPath();
            ctx.arc(x,y,r*18/20,0,360*Math.PI/180,false);//半径取值为r的20分之18
            ctx.closePath();
            ctx.fill();
            /*开始绘制时针分针和秒针,技巧就是起始弧度和结束弧度值一样*/
            /*开始绘制时针*/
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.lineWidth = 7;
            ctx.lineCap = ‘round‘;//向线条末端添加圆形线帽
            ctx.arc(x,y,r*10/20,arcHour,arcHour,false);//半径取值为r的20分之10
            ctx.stroke();
            ctx.closePath();
            /*开始绘制分针*/
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.lineWidth = 5;
            ctx.lineCap = ‘round‘;
            ctx.arc(x,y,r*12/20,arcMin,arcMin,false);//半径取值为r的20分之12
            ctx.stroke();
            ctx.closePath();
            /*开始绘制秒针*/
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.lineWidth = 2;
            ctx.lineCap = ‘round‘;
            ctx.arc(x,y,r*16/20,arcSen,arcSen,false);//半径取值为r的20分之16
            ctx.stroke();
            ctx.closePath();
        }
        setInterval(‘drawClock()‘,1000);//每隔1秒调用绘制时钟函数
    </script>
</body>
</html>

js绘制时钟

标签:支持   etc   cse   cond   bsp   ntb   lock   round   lang   

原文地址:https://www.cnblogs.com/dbda/p/11523521.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!