lundi 12 septembre 2016

What are some typical design patterns when using the Canvas API?

I'm starting to get into graphical programming using the Canvas API, but I haven't seen any design patterns for reusing canvas code. So far I've only seen examples using a global canvas object and a single draw function.

I'm coming from a Python tkinter background where the primary pattern is to create a class for each graphical object you want to reuse, and pass the drawing context to it so the object can draw itself. I was thinking about using the module pattern below to achieve the same thing, but I'm open to a more JavaScript way if there is one.

var MyShape = function (ctx) {
    // Assign the canvas context and any other required properties,
    // then draw the object.
    this.ctx = ctx;
    this.draw();
}

MyShape.prototype.draw = function () {
    // Use this.ctx to access the Canvas API and draw the object.
}

Aucun commentaire:

Enregistrer un commentaire