Tengo el siguiente segmento de código destinado a dibujar una imagen en el lienzo. Este código funciona:
var ctx = canvas.getContext('2d'); class Rectangle { constructor(x, y, scale, source) { this.scale = scale; this.source = source; this.x = x; this.y = y; } update() { var sprite = new Image(); sprite.src = this.source; sprite.onload = function () { ctx.drawImage(sprite, this.x, this.y, sprite.width/3, sprite.height/3); } } } const rect = new Rectangle(0, 0, 1, 'circle.jpeg'); rect.update();Pero, cuando reemplazo esta línea:
ctx.drawImage(sprite, this.x, this.y, sprite.width/3, sprite.height/3);con este:
ctx.drawImage(sprite, this.x, this.y, sprite.width/this.scale, sprite.height/this.scale);el lienzo no muestra nada en absoluto. Todo lo que debería hacer es reemplazar los 3 de antes con el valor del constructor (que configuro en 1 cuando creo una nueva instancia). ¿Por qué no dibuja nada?
Movería el sprite al constructor de esa manera cuando llamamos a la actualización, no tenemos que crear una nueva imagen, la idea detrás de eso es que la función de actualización podría llamarse varias veces de manera eficiente.
Vea este ejemplo a continuación:
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); class Rectangle { constructor(x, y, scale, source) { this.scale = scale; this.x = x; this.y = y; this.sprite = new Image(); this.sprite.src = source; this.sprite.onload = () => { this.update() }; } update() { if (this.sprite) { ctx.drawImage(this.sprite, this.x, this.y, this.sprite.width / this.scale, this.sprite.height / this.scale); } } } const rect = new Rectangle(0, 0, 3, 'http://i.stack.imgur.com/UFBxY.png'); canvas.addEventListener("click", () => { ctx.clearRect(0, 0, canvas.width, canvas.height); rect.x += 5; rect.update(); }); <canvas id="canvas"></canvas> Puede ver que, como se sugiere en los comentarios de @skara9, estoy usando () => en lugar de function() y estoy llamando a la actualización allí.
En esta muestra también agregué canvas.addEventListener("click" que muestra cómo cuando el usuario hace clic en el lienzo, el dibujo se mueve un poco hacia la derecha, la lógica es simple, aumentamos el valor de rect.x y luego llamamos rect.update(); que dibujará la imagen en la nueva ubicación.