Ein Bild in einem Canvas-Element drehen und verschieben?

Question

Ich möchte ein Bild eines Balls in einem Element verschieben und drehen. Der Ball ist 68x68 und die Leinwand ist 300x200. Der Ball bewegt sich entlang der x- und y-Achse und dreht seine x- und y-Geschwindigkeit, wenn er auf eine Wand trifft - all dies funktioniert. Ich kann mir einfach nicht vorstellen, wie man eine Rotation über die Bewegung macht.

Meine draw() Funktion, die ich alle 30 ms durch window.setInterval nennen, sieht etwa so aus:

var draw = function() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.save(); 
    ctx.rotate(ball_radians); 
    ctx.drawImage(ball_img, x, y); 
    ctx.restore(); 

    // calculate new x, y, and ball_radians 
    } 

Dies macht den Ball über den Bildschirm fliegen, so eindeutig etwas mache ich falsch. Was vermisse ich?

Answer 1

1. Übersetzen Sie den Kontext an den Punkt auf der Leinwand, um den sich das Objekt drehen soll.
2. Drehen Sie den Kontext.
3. Entweder:
   • den Kontext von dem für den Drehmittelpunkt innerhalb des Objekts versetzt negativen Übersetzen und dann bei 0,0 das Objekt zeichnen, oder
   • das Bild Zeichne die negativ für die in dem Objekt-Offset unter Verwendung von Drehzentrum.

z.B.

ctx.save(); 
ctx.translate(canvasLocX, canvasLocY); 
ctx.rotate(ballRotationInRadians); 
ctx.drawImage(ball_img, -ballCenterX, -ballCenterY); 
ctx.restore(); 

Beachten Sie, dass, wenn Sie absolute Geschwindigkeit benötigen, statt Speichern und Wiederherstellen der Leinwand (Umgang mit vielen Eigenschaften, die Sie nicht ändern), können Sie Ihre Arbeit einfach rückgängig machen:

ctx.translate(canvasLocX, canvasLocY); 
ctx.rotate(ballRotationInRadians); 
ctx.drawImage(ball_img, -ballCenterX, -ballCenterY); 
ctx.rotate(-ballRotationInRadians); 
ctx.translate(-canvasLocX, -canvasLocY); 

Der bisherige ein bisschen voreilige Optimierung wurde blind von jemand anderem nachgepatcht; Ich habe kein Benchmarking durchgeführt, um zu überprüfen, dass es korrekt ist.

bearbeiten: Ich habe ein verspottet Arbeits Beispiel dafür hier hinzugefügt: http://phrogz.net/tmp/canvas_beachball.html