HTML5 Canvas Elements как объекты

Question

Я хочу конвертировать старую ActionScript-игру в HTML5.Мне нравится подход AS3, который заключается в том, что каждый элемент, который вы рисуете на холсте, является объектом, которым вы можете манипулировать, например, выполнять действия и анимацию.

Кажется, что прямой холст не дает вамэта возможность, но я надеялся, что была структура, которая абстрагировала холст HTML5 и дала ему эту дополнительную силу.

Answer 1

Вы можете создавать функции конструктора для конструирования элементов, которые вам нужно создать, и вы можете создавать методы действия в конструкторе, таким образом, у вас будут все возможные возможности в зависимости от элемента и его действий.

Пример функции конструктора Ball:

// Ball constructor
var Ball = function(x, y) {
    this.x = x;
    this.y = y;

    this.radius = 10;
    this.color = '#fff';

    // Direction and min, max x,y
    this.dX = 15;
    this.dY = -15;

    this.minX = this.minY = 20 + this.radius;
    this.maxX = this.radius - (canvasWidth - 20);
    this.maxY = this.radius + canvasHeight;

    this.draw = function(ctx) {
        ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, twoPI, true);
        ctx.closePath();
        ctx.save();
            ctx.fillStyle = this.color;
            ctx.fill();
        ctx.restore();
    };
};

Использовать как:

// CREATE THE BALL
ball = new Ball(centerX, canvasHeight - paddle.height - 30);
ball.draw(ctx);