HTML5 canvas drawImage mit einem Winkel

Question

Ich experimentiere mit Animation in <canvas> und kann nicht herausfinden, wie man ein Bild in einem Winkel zeichnet. Der gewünschte Effekt besteht darin, dass einige Bilder wie üblich gezeichnet werden, wobei sich ein Bild langsam dreht. (Dieses Bild ist nicht in der Mitte des Bildschirms, wenn das einen Unterschied macht).

Answer 1

Sie müssen die Transformationsmatrix ändern, bevor Sie das zu drehende Bild zeichnen.

Angenommen, Bildpunkte verweisen auf ein 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 sind die Mitte des Bildes auf der Zeichenfläche.

Answer 2

ich eine Funktion geschrieben haben (basierend auf Jakub Antwort), die Benutzer ein Bild in einer X, Y-Position basierend auf einer benutzerdefinierten Drehung in einem benutzerdefinierten Drehpunkt zu malen erlaubt:

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 anrufen es wie folgt:

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); 

Answer 3

es ist interessant, dass die erste Lösung für so viele Menschen gearbeitet, es hat nicht das Ergebnis gebe ich brauchte. Am Ende habe ich dies zu tun hatte:

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

wo (positionX, positionY) die Koordinaten auf der Leinwand ist, dass ich das Bild wollen bei lokalisiert und (x, y) ist der Punkt auf dem Bild, wo ich das Bild drehen möchten.