Canvas学習(1)　マウス追従

by Nick Hulea

HTML

<div style="margin:0 auto; text-align:center;">
    <canvas id="canvas" width="480" height="480" style="margin:0 auto;"></canvas>
</div>

JavaScript

var Class = function () {
    return function () {
        this.initialize.apply(this, arguments)
    }
}
var Stage = Class();
Stage.prototype = {
    initialize: function (canvasId, bgColor, rate) {
        this.rate = Math.round(1000 / rate);
        this.canvas = document.getElementById(canvasId);
        this.context = this.canvas.getContext("2d");
        this.bgColor = bgColor;
        this.rect = this.canvas.getBoundingClientRect();
        this.mouseX = 0;
        this.mouseY = 0;
        this.children = [];
        var self = this;
        this.canvas.onmousemove = function (e) {
            self.mouseX = e.clientX - self.rect.left;
            self.mouseY = e.clientY - self.rect.top;
        };
    },
    refresh: function () {
        this.context.fillStyle = this.bgColor;
        this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
    },
    addChild: function (obj) {
        this.refresh();
        this.children.push(obj);
        obj.stage = this;
        obj.draw();
    },
    update: function () {
        this.refresh();
        for (var i = 0; i < this.children.length; i++) {
            this.children[i].draw();
        }
    },
    rendering: function (func) {
        var self = this;
        setInterval(function () {
            func();
            self.update();
        }, this.rate);
    }
};

var Circle = Class();
Circle.prototype = {
    initialize: function (radius, color) {
        this.radius = radius;
        this.color = color;
        this.stage = null;
        this.x = 0;
        this.y = 0;
    },
    draw: function () {
        if (this.stage == null) return;

        var context = this.stage.context;
        context.fillStyle = this.color;
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
        context.closePath();
        context.fill();
    }
};

window.addEventListener("load", function () {
    var stage = new Stage("canvas", "#ccc", 50);
    var circle = new...