Ich habe eine einfache Aufgabe - ich muss ein Rechteck zeichnen, drehen und kopieren und klonen seine gedrehte Version. Ich versuche es so zu tun:Drehen Sie die Zeichnung auf Leinwand
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//1. rotate canvas
ctx.rotate(-30 * Math.PI/180);
ctx.rect(10, 60, 80, 40);
ctx.stroke();
//2. copy rotated rectangle
var img = ctx.getImageData(0, 0, 140, 140);
//3. rotate back
ctx.rotate(30 * Math.PI/180);
//4. draw rotated version of the rectangle
ctx.putImageData(img, 80, 100);
Die Idee ist sehr einfach. Im ersten Schritt zeichne ich ein Rechteck, im zweiten Schritt drehe ich meine Leinwand und tue, was ich für einen Schnappschuss halte (oder erstelle eine Kopie meines gedrehten Rechtecks), im dritten Schritt drehe ich meine Leinwand zurück (so muss mein gedrehtes Rechteck) nicht mehr gedreht werden) und im letzten Schritt füge ich der Leinwand ein neues Objekt hinzu - die Kopie des gedrehten Rechtecks. Aber das ist, was ich bekommen:
Während ich erwartet hatte dieses Bild zu bekommen:
Was mache ich falsch und wie kann ich das gewünschte Ergebnis zu bekommen?
Wenn tatsächlich Drehen Sie zuerst den Kasten zeichnen. Zu '// 3. Drehen Sie zurück, drehen Sie sich, aber tun Sie nichts damit, um es auf die Leinwand zu zeichnen. https://jsfiddle.net/jr3g9cyk/1/ – PeeHaa
Nun, Sie zeichnen Rechtecke zweimal. Aber ich möchte es einmal zeichnen und mit getImageData klonen. – Jacobian
Es ist eine strenge Voraussetzung, getImageData zu verwenden. Der Haken ist, dass ich meine Frage mit zwei Rechtecken vereinfacht habe, aber in der Realität ist die Situation viel schlimmer - es könnte einen farbigen Hintergrund mit verschiedenen Zeichnungen geben. Was ich will, ist diesen Hintergrund zu drehen, einen Chunk daraus zu erstellen und diesen Chunk später an einer anderen Koordinate zu zeichnen. – Jacobian