canvas回顾，写一个时钟

再次回顾canvas，写一个时钟练练手，直接上代码。

效果图：

html部分：

<div style="text-align: center;margin-top: 200px">
    <div style="display: inline-block;padding: 10px;border-radius: 20px;margin: auto;background: #ddd">
       <canvas id="clock" width="300px" height="300px"></canvas>
    </div>
</div>
<script src="clock.js"></script>
<script>
    new Clock().init();
</script>

js部分：

(function () {
    var dom = document.getElementById("clock"),
        ctx = dom.getContext("2d"),
        width = ctx.canvas.width,
        height = ctx.canvas.height;

    var clock = function () {
        this.r = width / 2;
    };

    clock.prototype = {
        init: function () {
            this.draw();
            setInterval(this.draw.bind(this), 1000); // 定时器
        },
        // 管理器
        draw: function () {
            ctx.clearRect(0, 0, width, height); // 清除画布
            var hour = getTime().hour,
                minute = getTime().minute,
                seconds = getTime().seconds;

            ctx.save();
            this.drawBackground();
            this.drawHourRect();
            this.drawHourText();
            this.drawHour(hour, minute);
            this.drawMinute(minute, seconds);
            this.drawseconds(seconds);
            this.drawCenterPoint();
            ctx.restore();
        },
        // 绘制背景
        drawBackground: function () {
            ctx.save();
            ctx.translate(this.r, this.r);
            ctx.beginPath();
            ctx.arc(0, 0, this.r, 0, 2 * Math.PI);
            ctx.fillStyle = "#ffffff";
            ctx.fill();

            ctx.beginPath();
            ctx.arc(0, 0, this.r - 2, 0, 2 * Math.PI);
            ctx.lineWidth = 4;
            ctx.strokeStyle = "#000";
            ctx.stroke();

            ctx.restore();
        },
        // 圆心点
        drawCenterPoint: function () {
            ctx.save();
            ctx.beginPath();
            ctx.arc(0, 0, 8, 0, 2 * Math.PI);
            ctx.fillStyle = "#f00";
            ctx.fill();
            ctx.restore();
        },
        // 刻度
        drawHourRect: function () {
            // 时刻度
            for (var i = 0; i < 12; i++) {
                ctx.beginPath();
                ctx.lineWidth = 8;
                ctx.save();
                ctx.translate(this.r, this.r);
                ctx.rotate((i * 30 * Math.PI) / 180);
                ctx.moveTo(0, -this.r);
                ctx.lineTo(0, -this.r + 16);
                ctx.stroke();
                ctx.restore();
            }
            // 分刻度
            for (var i = 0; i < 60; i++) {
                ctx.beginPath();
                ctx.lineWidth = 2;
                ctx.save();
                ctx.translate(this.r, this.r);
                ctx.rotate((i * 6 * Math.PI) / 180);
                ctx.moveTo(0, -this.r);
                ctx.lineTo(0, -this.r + 10);
                ctx.stroke();
                ctx.restore();
            }
        },
        // 设置小时数字
        drawHourText: function () {
            var that = this;
            ctx.translate(that.r, that.r);
            var hour = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
            hour.map(function (number, i) {
                var rad = ((2 * Math.PI) / 12) * i;
                var x = Math.cos(rad) * (that.r - 30);
                var y = Math.sin(rad) * (that.r - 30);
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                ctx.font = "24px Georgia";
                ctx.fillText(number, x, y);
            });

            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.font = "22px MingLiU";
            ctx.fillText("Heart", 0, -this.r / 2);
        },

        // 时针
        drawHour: function (hour, minute) {
            var hRad = (hour * 30 * Math.PI) / 180;
            var mRad = ((minute / 60) * 30 * Math.PI) / 180;
            ctx.save();
            ctx.beginPath();
            ctx.lineWidth = 8;
            ctx.rotate(hRad + mRad);
            ctx.moveTo(0, 10);
            ctx.lineTo(0, -this.r / 2);
            ctx.lineCap = "round";
            ctx.stroke();
            ctx.restore();
        },
        // 分针
        drawMinute: function (minute, seconds) {
            var mRad =
                (minute * 6 * Math.PI) / 180 + ((seconds / 60) * 6 * Math.PI) / 180;
            ctx.save();
            ctx.beginPath();
            ctx.lineWidth = 4;
            ctx.rotate(mRad);
            ctx.moveTo(0, 20);
            ctx.lineTo(0, -this.r / 1.5);
            ctx.strokeStyle = "green";
            ctx.lineCap = "round";
            ctx.stroke();
            ctx.restore();
        },
        // 秒针
        drawseconds: function (seconds) {
            var sRad = (seconds * 6 * Math.PI) / 180;
            ctx.save();
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.rotate(sRad);
            ctx.moveTo(0, 30);
            ctx.lineTo(0, -this.r + 20);
            ctx.strokeStyle = "#f00";
            ctx.lineCap = "round";
            ctx.stroke();
            ctx.restore();
        }
    };
    // 获取时间
    function getTime() {
        var date = new Date();

        return {
            hour: date.getHours(),
            minute: date.getMinutes(),
            seconds: date.getSeconds()
        };
    }

    window.Clock = clock;
})(window || {});