wie ein Bild (Rahmen) in Leinwand croppen

Question

Ich habe mehrere Bilder in einem einzigen Bild. Wie male ich den Ausschnitt eines Bildes in der Leinwand?

Party Pooper ist, dass die Leinwand über CSS gestreckt und reaktionsfähig ist. Beispiel:

Sag mal, ist jedes Bild 100x100px und ich möchte Rahmen malen "5". So habe ich Rahmen folgende Position zu malen: x100, Y200, width100, Höhe 100

Mein Code sieht ungefähr so ​​aus:

this.ctx = this.canvas.get(0).getContext("2d"); 
this.ctx.drawImage(this.image, - this.imageWidth * x, - this.imageHeight * y, this.image.width, this.image.height); 

Alle Werte kommen richtig in meiner Konsole aber das Ergebnis ist Jack Scheiße. Habe ich drawImage falsch interpretiert?

Answer 1

Warum verwenden Sie negative Werte?

für die "5", die Sie verwenden sollten:

this.ctx.drawImage(this.image, 100, 100); 

oder wenn Ihr Sprite nicht die richtige Größe hat:

this.ctx.drawImage(this.image, 100, 100, 100, 100); 

doc für drawImage: https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage