前端canvas制作仿iwatch时钟

前端本地开发环境 网站开发 前端 外包 网站开发后台前端数据库

html 代码

<!doctype html>
<head>
    <meta charset=”UTF-8″>
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: #000;
            text-align: center;
        }
        canvas {
            background: #fff;
        }
    </style>
    <script>
        function toDou(iNum) {
            return iNum < 10 ? ‘0’ + iNum : ” + iNum;
        }
        function d2a(n) {
            return n * Math.PI / 180;
        }
        window.onload = function () {
            var oC = document.getElementById(‘c1’);
            var gd = oC.getContext(‘2d’);
            var cx = oC.width / 2,
                cy = oC.height / 2;
            function clock() {
                gd.clearRect(0, 0, oC.width, oC.height);
                var oDate = new Date();
                var H = oDate.getHours() % 12;
                var M = oDate.getMinutes();
                var S = oDate.getSeconds();
                var MS = oDate.getMilliseconds();
                drawArc(60, 0, (H * 30 + M / 60 * 30), ‘orange’);
                drawArc(80, 0, (M * 6 + S / 60 * 6), ‘purple’);
                drawArc(100, 0, (S * 6 + MS / 1000 * 6), ‘aqua’);
                var str = toDou(H) + ‘:’ + toDou(M) + ‘:’ + toDou(S);
                gd.font = ’20px 微软雅黑’;
                gd.textAlign = ‘center’;
                gd.textBaseline = ‘middle’;
                gd.fillText(str, cx, cy);
            }
            clock()
            setInterval(clock, 1);
            function drawArc(r, s, e, color) {
                color = color || ‘black’;
                gd.beginPath();
                gd.arc(cx, cy, r, d2a(s – 90), d2a(e – 90), false);
                gd.strokeStyle = color;
                gd.lineWidth = 20;
                gd.stroke();
            }
        };
    </script>
</head>
<body>
    <canvas id=”c1″ width=”800″ height=”600″></canvas>
</body>
</html>

前端开发中的测试环境 前端还用安装开发环境吗 配置前端开发环境

» 本文来自:前端开发者 » 《前端canvas制作仿iwatch时钟》
» 本文链接地址:https://www.rokub.com/5388.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!