Ich möchte wissen, wie ich eine ganze Szene übersetzen kann, die bereits auf einer html5-Leinwand gezeichnet wurde, zum Beispiel 5 Pixel nach unten. Ich weiß, dass die Übersetzungsmethode nur das Koordinatensystem des Canvas übersetzt, aber ich möchte wissen, ob es eine Möglichkeit gibt, die gesamte bereits auf die Leinwand gezeichnete Szene zu übersetzen.Eine html5-Leinwand übersetzen
Sie können die Transformationen anwenden und rufen drawImage in der Leinwand vorbei selbst.
ctx.save();
ctx.translate(0, 5);
ctx.drawImage(canvas, 0, 0);
ctx.restore();
Wenn Sie das tun, wird der ursprüngliche Inhalt immer noch unten sein. Je nachdem, welchen Effekt Sie erzielen möchten, kann Ihnen das Einstellen von globalCompositeOperation dabei helfen.
Aber wahrscheinlich müssen Sie drawImage verwenden, um zuerst in eine zweite Zeichenfläche zu kopieren, die aktuelle zu löschen, die Transformation anzuwenden und von der Kopie zu zeichnen.
Nicht, es sei denn, Sie machen einen Screenshot und übersetzen das.
jedoch nur
Einfügencontext.translate(0, 5)// or your values
direkt vor Ihrer Zeichnung Code sollte es tun.
Referenz: MDN Canvas Tutorial (Transformations)
Ich habe das schon behandelt, und (zumindest dachte ich, ich) habe klar gemacht, dass das nicht das ist, was ich wollte. Diese Übersetzung übersetzt alles, was ich danach zeichne, nicht etwas, das bereits gezeichnet ist. Allerdings könnte Ihre Screenshot-Lösung, was ich wollte. Hast du Anweisungen, wie das geht? – George
Das Canvas-Objekt verfügt über eine Methode namens ToDataUrl. Siehe diese Frage http://stackoverflow.com/questions/934012/get-image-data-in-javascript –
Das klingt wie, was ich wollte. Ich werde es ausprobieren und Sie wissen lassen, ob es für mich funktioniert hat. – George
Diese Lösung funktionierte gut für mich. Es funktioniert jedoch nicht so gut, wenn es auch Skalierungen gibt. Ich habe eine Zeichenfläche, deren Skalierung so ist, dass der Zeichenbereich eine Breite und Höhe von beispielsweise 120000 und 60000 hat. Das Zeichenelement selbst hat die Breite 1200 und die Höhe 600, sodass die Skalierungsumwandlung vor dem Zeichnen im Koordinatensystem ausgeführt wird. Wie auch immer, das Problem ist, dass das Übersetzen von AND-Skalierung das Bild verwischt, wenn ich es auf eine zweite Leinwand kopiere, den Strom lösche und die Transformation anwende und kopiere, wie du gesagt hast. Ich wollte nur wissen, ob du weißt, wie man es unscharf macht. – George
Ja, genau das passiert. Das Problem ist, dass, wenn ich vom Hauptfenster mit der hohen Auflösung auf das Backup-Zeichenfeld zeichne, es immer mit der Basisauflösung von 1200x600 anstelle der vergrößerten Auflösung von 1200000x600000 gezeichnet wird. Außerdem ist die Hin- und Her-Lösung für meine Zwecke in Ordnung, da sie dies nur tun muss, wenn der Benutzer dies wünscht, und dies nicht kontinuierlich tun wird. – George