博客园

2020-01-02 13:56:47 阅读：224 来源： 互联网

标签：angle centre 博客园 radius var day Math

时间代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <div style="text-align: center; color: #ffffff;">
        <canvas id="canvas" height="160" width="160">
            您的浏览器不支持html5的canvas
        </canvas>
        <div style="height: 10px">
        </div>
        <div style="background-color: #0094ff;">
            <div id="div1">
            </div>
            <div id="div2">
            </div>
        </div>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById("canvas");
            var can = canvas.getContext("2d");
            var radius = 80; //半径
            var centre = [80, 80]; //中心点

            setInterval(function () {
                mydrawclock();

            }, 1000);
            //   mydrawclock();

            function mydrawclock() {
                //清空画布
                can.clearRect(0, 0, 500, 500);
                //钟的大小（圆）
                can.fillStyle = "#ebf0eb";
                can.beginPath();
                can.arc(centre[0], centre[1], radius, 0, Math.PI * 2, true);
                can.closePath();
                can.fill();
                //中心点
                can.fillStyle = "#0094ff";
                can.beginPath();
                can.arc(centre[0], centre[1], 4, 0, Math.PI * 2, true);
                can.closePath();
                can.fill();
                //画钟 宽度 度数 颜色 长度
                function drawclock(w, d, c, l) {
                    can.beginPath();
                    can.strokeStyle = c;
                    can.lineWidth = w;
                    can.moveTo(centre[0], centre[1]);
                    can.lineTo(centre[0] + (radius - l) * Math.cos(d), centre[1] + (radius - l) * Math.sin(d));
                    can.stroke();
                }

                var date = new Date();
                //因为画圆是从3点钟方向开始的 所以要减去
                var hours = date.getHours();
                var minutes = date.getMinutes();
                var seconds = date.getSeconds();
                var day = date.getDay();

                drawclock(4, (hours - 3 + minutes / 60) * 30 * Math.PI / 180, "#0094ff", 33);
                drawclock(3, (minutes - 15 + seconds / 60) * 6 * Math.PI / 180, "#0094ff", 22);
                drawclock(2, (seconds - 15) * 6 * Math.PI / 180, "#0094ff", 1);

                document.getElementById("div1").innerHTML = hours + ":" + minutes + ":" + seconds;

                switch (day) {
                    case 0:
                        day = "星期天";
                        break;
                    case 1:
                        day = "星期一";
                        break;
                    case 2:
                        day = "星期二";
                        break;
                    case 3:
                        day = "星期三";
                        break;
                    case 4:
                        day = "星期四";
                        break;
                    case 5:
                        day = "星期五";
                        break;
                    case 6:
                        day = "星期六";
                        break;
                    default:
                        break;
                }

                document.getElementById("div2").innerHTML = day; // "</br>" + day;
                // centre[0], centre[1]
                //画分钟刻度
                for (var i = 0; i < 60; i++) {
                    var angle = i * 6 * Math.PI / 180;
                    can.strokeStyle = "red";
                    can.beginPath();
                    can.lineWidth = 1;
                    can.moveTo(centre[0] + radius * Math.cos(angle), centre[1] + radius * Math.sin(angle));
                    can.lineTo(centre[0] + (radius - 5) * Math.cos(angle), centre[1] + (radius - 5) * Math.sin(angle));
                    can.stroke();
                }
                //画时钟刻度
                for (var i = 0; i < 12; i++) {
                    var angle = i * 30 * Math.PI / 180;
                    can.strokeStyle = "#0094ff";
                    can.lineWidth = 2;
                    can.beginPath();
                    can.moveTo(centre[0] + radius * Math.cos(angle), centre[1] + radius * Math.sin(angle));
                    can.lineTo(centre[0] + (radius - 8) * Math.cos(angle), centre[1] + (radius - 8) * Math.sin(angle));
                    can.stroke();
                }
            }


        }

</script>

</body>
</html>

标签：angle,centre,博客园,radius,var,day,Math
来源： https://www.cnblogs.com/chenze-Index/p/12132515.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

博客园