Wie würde man ein Bild um sich mit Leinwand drehen?

Question

Ich habe Probleme roating ein Bild um sich selbst Leinwand verwenden.

Da Sie ein Bild nicht drehen können Sie die Leinwand zu drehen haben: wenn ich die Leinwand von einem Grad drehen, um den Ursprung, um die ich will Änderungen drehen. Ich habe nicht bekommen, wie diese Änderung zu verfolgen.

Dies ist mein aktueller Code: http://pastie.org/669023

Und eine Demo ist unter http://preview.netlashproject.be/cog/

Wenn Sie Dinge auszuprobieren, die gezippt Code und Bild ist unter http: / /preview.netlashproject.be/cog/cog.zip

Answer 1

Ich reparierte Code:

var rotation = 0;
function draw(){

  var ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.globalCompositeOperation = 'destination-over';

  ctx.save();
  ctx.clearRect(0,0,200,200);
  ctx.translate(100,100); // to get it in the origin
  rotation +=1;
  ctx.rotate(rotation*Math.PI/64); //rotate in origin
  ctx.translate(-100,-100); //put it back
  ctx.drawImage(cog,0,0);
  ctx.restore();
}

Das Wichtigste dabei ist, dass Sie das Bild auf den Ursprung zu übersetzen haben, bevor zu drehen, und übersetzt es zurück!

Answer 2

es sieht so etwas sein, könnten Sie verwenden: http://wilq32.googlepages.com/ wilq32.rollimage222

Hier ist ein Test davon: http://www.antiyes.com/test/index .php