Kopiere und schneide Bilder in Javascript
Ich versuche ein kleines 2D-Spiel in Javascript / Canvas zu erstellen, das aus mehreren animierten Sprites besteht. Ich möchte die Anzahl der HTTP-Anfragen reduzieren, also habe ich jeden Frame der Animation (32px mal 32px) zu einem Bild pro Sprite kombiniert (zB 192px mal 128px). Gibt es eine Möglichkeit, diese Bilder clientseitig in mehrere kleinere Bilder zu kopieren und zu beschneiden? Es würde meinen Rendering-Code erheblich vereinfachen und die Ladezeit aufgrund der Netzwerklatenz verringern.
4 Antworten
Laden Sie das Bild einfach in ein img-Tag, wobei die Stilattributanzeige auf ausgeblendet gesetzt ist. Dann schneiden Sie das Bild auf einer Leinwand außerhalb des Bildschirms aus und schreiben Sie dieses Bild auf die Leinwand, falls erforderlich.
Wenn Sie keine Leinwand oder Bibliothek von Drittanbietern verwenden möchten, können Sie das Bild zu einem div (mit "overflow: hidden") der Größe der beschnittenen Version hinzufügen und dem Bild einen negativen linken und oberen Rand geben .
Jeder wird das gesamte Bild herumtragen, aber nur einen Teil davon anzeigen, was die Leistung beeinflussen kann - oder auch nicht. Ich glaube, du musst dem div-Element eine Position geben: auch relativ, um IE glücklich zu machen.
Alternativ können Sie das Bild als Hintergrund des div zuweisen und die backgroundPosition angeben. Ich glaube mich zu erinnern, dass das für etwas, das ich einmal gemacht habe, nicht funktioniert hat, nicht sicher warum. (Ich denke, es hatte mit Opazität zu tun)
Tags und Links javascript canvas crop client-side