canvas画时钟

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>canvas画时钟</title>
        <script>
        window.onload = function() {
            var canvas = document.getElementById("canvas");
            canvas.width = canvas.height = 400;
            canvas.style.background = "white";
            if (canvas.getContext) {
                var ext = canvas.getContext("2d");
                drawClock()
                setInterval(drawClock, 1000);
            }
            function drawClock() {
                var x = 200;
                var y = 200;
                var r = 150;
                ext.clearRect(0, 0, canvas.width, canvas.height)
                var oData = new Date();
                var hours = oData.getHours();
                var minutes = oData.getMinutes();
                var seconds = oData.getSeconds();
                var hoursValue = (-90 + hours * 30 + minutes / 2) * Math.PI / 180; //分针过了30，时针不应该正好在整点上，2分钟一度；
                var minutesValue = (-90 + minutes * 6) * Math.PI / 180;
                var secondsValue = (-90 + seconds * 6) * Math.PI / 180;
                ext.lineWidth = 2
                ext.arc(x, y, r, 0, Math.PI * 2, false);
                ext.stroke();
                //画小刻度
                for (var i = 0; i < 60; i++) {
                    ext.strokeStyle = "black"
                    ext.lineWidth = 1;
                    ext.beginPath();
                    ext.moveTo(x, y);
                    ext.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false)
                    ext.closePath();
                    ext.stroke();
                }
                drawBlankCircle(10)
                    //画大刻度
                for (var i = 0; i < 12; i++) {
                    ext.lineWidth = 3;
                    ext.strokeStyle = "green"
                    ext.beginPath();
                    ext.moveTo(x, y);
                    ext.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false)
                    ext.closePath();
                    ext.stroke();
                }
                drawBlankCircle(15)
                    //画空白覆盖圆;
                function drawBlankCircle(d) {
                    ext.fillStyle = "white"
                    ext.beginPath();
                    ext.arc(x, y, r - d, 0, Math.PI * 2, false);
                    ext.closePath();
                    ext.fill();
                }
                //画时针;
                ext.lineWidth = 5;
                ext.strokeStyle = "#f90"
                ext.beginPath();
                ext.moveTo(x, y);
                ext.arc(x, y, r - 60, hoursValue, hoursValue, false);
                ext.closePath();
                ext.stroke();
                //画分针;
                ext.lineWidth = 3;
                ext.strokeStyle = "red"
                ext.beginPath();
                ext.moveTo(x, y);
                ext.arc(x, y, r - 40, minutesValue, minutesValue, false);
                ext.closePath();
                ext.stroke();
                //画秒针;
                ext.lineWidth = 1;
                ext.strokeStyle = "black"
                ext.beginPath();
                ext.moveTo(x, y);
                ext.arc(x, y, r - 25, secondsValue, secondsValue, false);
                ext.closePath();
                ext.stroke();
                //画表盘中心小圆;
                ext.fillStyle = "black";
                ext.beginPath();
                ext.arc(x, y, 6, 0, Math.PI * 2, false);
                ext.closePath();
                ext.fill();
            }
        }
        </script>
    </head>
    <body >
        <canvas id="canvas">        
        </canvas>
    </body>
</html>
相关阅读:
Pyhton学习——Day60
Pyhton学习——Day58
Python——微信数据分析
 C/C++文件指针偏移
 I/O流+统计文件词频
 vector概念
 new/delete工作机制
 Singleton单例类模式
 对象数组
 特殊成员函数
原文地址：https://www.cnblogs.com/jone-chen/p/5038417.html