Goodspeed

导航

canvas时钟 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Clock</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
        var Clock = function () {
            var canvas = document.getElementById("canvas");
            this.context = canvas.getContext("2d"),
            this.FONT_HEIGHT = 15;
            this.context.font = this.FONT_HEIGHT + "px Arial";
            canvas.width = 500;
            canvas.height = 500;

            this.MARGIN = 35;
            this.RADIUS = canvas.width / 2 - this.MARGIN;
        }

        Clock.prototype.draw = function () {
            //清除绘画
            this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
            this.circle();
            this.numbers();
            this.center();
            this.hands();
        }

        Clock.prototype.circle = function () {
            
            this.context.beginPath();
            this.context.arc(canvas.width / 2, canvas.height / 2, this.RADIUS, 0, Math.PI * 2, true);
            this.context.stroke();
        };

        Clock.prototype.numbers = function () {
            var _ = this;
            var NUMBER_SPACING = 20;
            var HAND_RADIUS = this.RADIUS + NUMBER_SPACING;
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].forEach(function (i) {
                var angle = Math.PI / 6 * (i - 3);
                var width = _.context.measureText(i).width;
                _.context.fillText(i,
                    canvas.width / 2 + Math.cos(angle) * HAND_RADIUS - width / 2,
                    canvas.height / 2 + Math.sin(angle) * HAND_RADIUS + _.FONT_HEIGHT / 3);

            });
        }

        Clock.prototype.center = function () {
            this.context.beginPath();
            this.context.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2, true);
            this.context.stroke();
        }

        Clock.prototype.hands = function () {
            var date = new Date, hour = date.getHours();
            hour = hour > 12 ? hour - 12 : hour;
            this.hand(hour * 5 + 5 * date.getMinutes() / 60, true, 50);
            this.hand(date.getMinutes(), false, 50);
            this.hand(date.getSeconds(), false, 0);
        }

        Clock.prototype.hand = function (loc, isHour, length) {
            var HAND_TRUNCATION = canvas.width / 25;
            var HOUR_HAND_TRUNCATION = canvas.width / 10;
            var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2;
            var radius = isHour ? this.RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION : this.RADIUS - HAND_TRUNCATION;
            radius -= length
            this.context.moveTo(canvas.width / 2, canvas.height / 2);
            this.context.lineTo(canvas.width / 2 + Math.cos(angle) * radius, canvas.height / 2 + Math.sin(angle) * radius);
            this.context.stroke();
        }

        var clock = new Clock();
        window.setInterval(function () {
            clock.draw();
        }, 1000);
        
        
        
    </script>
</body>
</html>

 

posted on 2015-03-11 22:56  Goodspeed  阅读(369)  评论(0)    收藏  举报