LANCARD.LAB｜ランカードコムのスタッフブログ

たのしくJavaScript勉強してきました。主催者レポートはこちら。

『例のあれ（仮題）- じゃばすく製作所（仮）ふたつめ。をこの際なのでやりました。』

配布ファイルやガイドブックも用意されてるので自習もできます、Canvasを用いて描画するアナログ時計作り。

私、一応時間内に動かせたんですが、Chromeで動かすと画面に収まらないという不具合がありまして、帰ってから調べたらメソッド呼び出しに()を付け忘れているという当日に何度も繰り返したミスが残っていました。

widthとかheightって名前だとプロパティと思っちゃうんだ。

ついでに同じような処理を関数に少しまとめたりした村部版はこんな感じ。

function SampleClock() {
    try {
        this.board = document.getElementById('board');
        this.canvas = document.getElementById('time');
        this.boardContext = this.board.getContext('2d');
        this.context = this.canvas.getContext('2d');
        this.board.width = this.canvas.width = window.innerWidth;
        this.board.height = this.canvas.height = window.innerHeight;
        this.boardContext.translate(this.width() / 2, this.height() / 2);
        this.context.translate(this.width() / 2, this.height() / 2);
        this.context.rotate(this.toRad(-90));

        this.draw_board();
    } catch (e) {
        alert('initialize error...');
    }
}
SampleClock.prototype = {
    width: function () {
            return this.board.width;
    },
    height: function () {
        return this.board.height;
    },
    radius: function () {
        if(this.width() > this.height()) {
            return this.height() / 2;
        } else {
            return this.width() / 2;
        }
    },
    
    toRad: function (angle) {
       return angle * (Math.PI / 180); 
    },
    hourRad: function (datetime) {
        var hour = datetime.getHours();
        var minute = datetime.getMinutes();
        var hour_for_disp = hour;
        if(hour > 12) {
            hour_for_disp = hour - 12;
        }
        return hour_for_disp * Math.PI / 6 + minute * Math.PI / 360;
    },
    minuteRad: function (datetime) {
        var minute = datetime.getMinutes();
        var second = datetime.getSeconds();
        return minute * Math.PI / 30 + second * Math.PI / 1800;
    },
    secondRad: function (datetime) {
        var second = datetime.getSeconds();
        var millisecond = datetime.getMilliseconds();
        return second * Math.PI / 30 + millisecond * Math.PI / 30000;
    },

    draw_time: function () {
        this.context.clearRect(-this.width() / 2, -this.height() / 2, this.width(), this.height());
        var now = new Date();
        var draw_line_for_time = function(context, rad, lineWidth, lineLength, lineColor) {
            context.save();
            context.beginPath();
            context.lineWidth = lineWidth;
            context.rotate(rad);
            context.moveTo(0, 0);
            context.lineTo(lineLength, 0);
            context.strokeStyle = lineColor;
            context.stroke();
            context.restore();
        }
        draw_line_for_time(
            this.context,
            this.hourRad(now),
            this.radius() * 0.08,
            this.radius() * 0.6,
            '#000000'
        );
        draw_line_for_time(
            this.context,
            this.minuteRad(now),
            this.radius() * 0.06,
            this.radius() * 0.8,
            '#000000'
        );
        draw_line_for_time(
            this.context,
            this.secondRad(now),
            this.radius() * 0.03,
            this.radius() * 0.8,
            '#ff0000'
        );

    },
    draw_board: function () {
        this.boardContext.beginPath();
        this.boardContext.lineWidth = this.radius() * 0.05;
        this.boardContext.arc(0, 0, this.radius() * 0.9, 0, Math.PI * 2);
        this.boardContext.stroke();

        this.boardContext.beginPath();
        this.boardContext.lineWidth = this.radius() * 0.1;
        this.boardContext.arc(0, 0, this.radius() * 0.05, 0, Math.PI * 2);
        this.boardContext.stroke();

        this.boardContext.beginPath();
        this.boardContext.lineWidth = this.radius() * 0.03;
        for (var i = 0; i < 12; i++) {
            this.boardContext.moveTo(this.radius() * 0.85, 0);
            this.boardContext.lineTo(this.radius() * 0.75, 0);
            this.boardContext.rotate(this.toRad(360 / 12));
        }
        this.boardContext.stroke();

        this.boardContext.beginPath();
        this.boardContext.lineWidth = this.radius() * 0.03;
        for (var i = 0; i < 60; i++) {
            this.boardContext.moveTo(this.radius() * 0.85, 0);
            this.boardContext.lineTo(this.radius() * 0.80, 0);
            this.boardContext.rotate(this.toRad(360 / 60));
        }
        this.boardContext.stroke();
    }
};

var clock = new SampleClock();
var timer;

function tik() {
    clock.draw_time();
    timer = setTimeout('tik()', 1000 / 60);
}

function tok() {
    clearInterval(timer);
}

tik();