HTML5 Canvas: переход от фигур к объектам?

Question

Я уже некоторое время возился с элементом html5 canvas. Это очень полезно и все, но я чувствую себя очень, очень ограниченным из-за того, что я, очевидно, не могу организовать холст с объектами (не изначально).

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

Мой вопрос: я что-то упустил? Предоставляет ли JavaScript нам способы обработки объектов внутри холста? Если нет, то есть ли библиотеки, которые уже делают это? Какой из них вы бы назвали лучшим?

Answer 1

Холст ничем не отличается от других инструментов рисования.У вас действительно есть , чтобы отслеживать то, что вы рисуете.Хитрость в том, как ты это делаешь.На самом деле это хорошая идея использовать объекты для этого, и это не так уж сложно.Вам просто нужно передать context холста любому объекту, чтобы он взаимодействовал с холстом и рисовал на нем.Таким образом, если у вас есть объект с именем Foo, вы можете сделать так, чтобы объект решал, как он будет нарисован.Например, он может иметь такой метод:

function Foo() {
  this.draw = function(context) {
    context.restore();
    context.fillStyle = "rgb(200,0,0)";
    context.fillRect (10, 10, 55, 50);
    context.save();
    // And so on...
  }

В вашем основном цикле рисования вы можете иметь код, подобный следующему:

// ... Various init - remember to set the context and store the Foo object somewhere
foo.draw(context);
// ...

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

PS: Я только что вспомнил блестящий учебник по всему HTML 5 / материалу canvas: Он здесь на MDN .