HTML5 canvas drawImage mit einem Winkel

Ich bin das Experimentieren mit animation in <canvas> und nicht arbeiten können, wie das zeichnen eines Bildes in einem Winkel. Der gewünschte Effekt ist ein paar Bilder gezeichnet, wie üblich, mit einem Bild rotieren langsam. (Dieses Bild ist nicht in der Mitte des Bildschirms, wenn das einen Unterschied macht).

InformationsquelleAutor der Frage Greg | 2010-09-25

  1. 57

    Müssen Sie ändern die matrix vor dem zeichnen des Bildes, das Sie wollen gedreht werden.

    Übernehmen Bild verweist auf eine HTMLImageElement Objekt.

    var x = canvas.width / 2;
var y = canvas.height / 2;
var width = image.width;
var height = image.height;

context.translate(x, y);
context.rotate(angleInRadians);
context.drawImage(image, -width / 2, -height / 2, width, height);
context.rotate(-angleInRadians);
context.translate(-x, -y);

    Die x -, y-Koordinaten der Mitte des Bildes auf der Leinwand.

    InformationsquelleAutor der Antwort Jakub Wieczorek

  2. 8

    Ich habe eine Funktion geschrieben (basierend auf Jakub Antwort), erlaubt es dem Benutzer, um zu malen ein Bild in einem X,Y-position, basierend auf einer eigenen rotation in einem benutzerdefinierten Drehpunkt:

    function rotateAndPaintImage ( context, image, angleInRad , positionX, positionY, axisX, axisY ) {
  context.translate( positionX, positionY );
  context.rotate( angleInRad );
  context.drawImage( image, -axisX, -axisY );
  context.rotate( -angleInRad );
  context.translate( -positionX, -positionY );
}

    Dann können Sie es so nennen:

    var TO_RADIANS = Math.PI/180; 
ctx = document.getElementById("canvasDiv").getContext("2d");
var imgSprite = new Image();
imgSprite.src = "img/sprite.png";

//rotate 45º image "imgSprite", based on its rotation axis located at x=20,y=30 and draw it on context "ctx" of the canvas on coordinates x=200,y=100
rotateAndPaintImage ( ctx, imgSprite, 45*TO_RADIANS, 200, 100, 20, 30 );

    InformationsquelleAutor der Antwort Yaume

  3. 3

    Es ist interessant, dass die erste Lösung gearbeitet, für so viele Leute, es nicht das Ergebnis geben, den ich brauchte.
    Am Ende musste ich um dies zu tun:

    ctx.save();
ctx.translate(positionX, positionY);
ctx.rotate(angle);
ctx.translate(-x,-y);
ctx.drawImage(image,0,0);
ctx.restore();

    wo (positionX, positionY) ist die Koordinaten auf der Leinwand, ich will das Bild sich auf und (x, y) ist der Punkt auf dem Bild, wo ich das Bild drehen.

    InformationsquelleAutor der Antwort PetrolHead

Schreibe einen Kommentar