html-drehen Sie die gesamte Leinwand um 90 Grad

Habe ich ein Bild gezeichnet, um eine html-cavas. Ich möchte in der Lage sein, um das Bild zu drehen um 90 Grad, aber ich kann nicht scheinen zu finden ein Beispiel, wie drehen der gesamten Leinwand Bild, nur ein Objekt auf der Leinwand.

Hat jemand Beispiel-code drehen eines gesamten Bilds um 90 Grad?

Nahm ich anwser unten wollte aber zusätzliche Beispiel-code : http://jsfiddle.net/VTyNF/1/

<canvas id="myCanvas" width="578" height="200"></canvas>

<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.translate(canvas.width/2,canvas.height/2) 
  context.rotate(90 * (Math.PI / 180));   
  context.beginPath();
  context.rect(188 - canvas.width/2, 50 - canvas.height/2, 200, 100);
  context.fillStyle = 'yellow';
  context.fill();
  context.lineWidth = 7;
  context.strokeStyle = 'black';
  context.stroke();
</script>
  • Könnten Sie ein paar Beispiel-code bitte?
  • ich denke, wie diese? jsfiddle.net/VTyNF/1, Wenn es sich dreht, sollte es vertikal statt horizontal, und noch in der Mitte des canvas-Bereichs.
  • Denken Sie daran, Sie können nicht drehen Sie Zeichnungen, die bereits auf Ihre Leinwand. Also erstmal klar jedes existierende Zeichnung aus der Leinwand mit Rahmen.clearRect(0,0,canvas.width,canvas.Höhe); Dann drehen Sie Ihre gesamte Leinwand, die Sie tun, Kontext.drehen(90*Math.PI/180); neu zeichnen alles, was Sie wollen auf der Leinwand und die neuen Zeichnungen wird um 90 Grad gedreht werden.
InformationsquelleAutor Kyle | 2013-08-08
  1. 2

    Würden Sie dieses Drehung, bevor Sie Ihre Leinwand. Sie können sich nicht drehen, alles, was bereits gezeichnet ist.

    Also:

    Drehen die Leinwand, die content.rotate() erwartet einen Wert im Bogenmaß. Also zuerst, lassen Sie es einfach durch die Umwandlung von Grad in Bogenmaß verwenden:

    function getRadianAngle(degreeValue) {
    return degreeValue * Math.PI / 180;
}

    Können Sie übersetzen möchten, die Leinwand, bevor drehen, so dass es die Herkunft ist korrekt eingestellt.

    context.translate(context.width/2,context.height/2);

    Sobald wir wissen, was Wert, den wir wollen, wir drehen Sie einfach die Leinwand, bevor wir alles zeichnen!

    Bitte beachten Sie, dass in Ihrem Beispiel, das Rechteck, das Sie gezeichnet haben, ist auch ausgeglichen in die ersten beiden Parameter von context.rect(X,Y,W,H)`.

    Ich finde es ist einfacher zu set Breite als Variablen, dann tun, einfache Mathematik, um re-position die box automatisch, merke jetzt sitzt es perfekt in der Mitte und dreht schön!

    DEMO: http://jsfiddle.net/shannonhochkins/VTyNF/6/

    • Hmm. Vielen Dank für die Hilfe so weit. Dies scheint sich zu drehen, von der linken oberen Ecke. Gibt es einen Weg, um die Drehung von der Mitte?
    • Tun Zusammenhang.übersetzen(canvas.width/2,canvas.height/2) kurz vor drehen.
    • Hey @user1308743 habe ich bearbeitet meine Geige für Sie. Hat ein übersetzen-Eigenschaft!
    • Ich habe die Feste fiddle und machte es viel sauberer, viel Spaß beim Programmieren!
    • Danke! Dies hilft eine Menge.
    InformationsquelleAutor Shannon Hochkins
  2. 2

    Sagen, Ihr canvas element hat id "foo". In JavaScript könnte man etwas wie das hier tun:

    var canvas = document.getElementById('foo'),
    context = canvas.getContext('2d');

//Rotates the canvas 90 degrees
context.rotate(90 * (Math.PI / 180));
    InformationsquelleAutor federico-t
  3. 0

    Konnte Sie CSS verwenden, drehen Sie den <canvas> element mit transform: rotate(90deg);?

    • warum würde er wollen, dass
    • Ich möchte das tatsächliche Bild gedreht werden, nicht nur schauen, gedreht durch drehen des canvas-element. Das image gespeichert werden soll.
    InformationsquelleAutor Dominic P
  4. 0

    Können Sie leicht drehen Sie das Bild um neunzig Grad durch die Manipulation der pixel-Daten. Wenn Sie Ihre Leinwand nicht quadratisch ist, müssen Sie einige Entscheidungen über das, was die "richtige" Antwort sein wird.

    Verwenden Sie die getImageData - Funktion zum abrufen der Pixel Bearbeiten, können Sie in der üblichen Weise, und verwenden Sie putImageData um das Ergebnis anzuzeigen.

    InformationsquelleAutor Samuel Edwin Ward
Schreibe einen Kommentar