Drehe jeden Kontext per JavaScript

Question

image = new Image(); 
image.src = 'assets/img/image.png'; 
for (var i = 0; i < this.bombs.length; i++) { 
    var bomb = this.bombs[i]; 
    ctx.drawImage(image, bomb.x - 2, bomb.y - 2, 15, 8); 

} 

Dies ist ein Bild in meinem Leinwandspiel und fällt von oben. Aber ich will, Bilder rotieren jeden Zustand zufällig.

Ich versuchte dies:

function drawRotated(degrees){ 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.save(); 
    ctx.translate(canvas.width/2,canvas.height/2); 
    ctx.rotate(degrees*Math.PI/180); 
    ctx.drawImage(image,-image.width/2,-image.width/2); 
    ctx.restore(); 
} 

hinzugefügt, um diese Funktion in meinem Bild, aber es funktioniert nicht. Wie kann ich es tun?

Answer 1

Sie sind auf dem richtigen Weg!

Um ein (oder mehr) Bilder drehen:

1. zum Mittelpunkt Übersetzen wo Sie das Bild zentriert werden sollen.
2. Drehen um den gewünschten Winkel
3. Zeichne die Bild
4. die Transformationen Rückgängig (Undo & rotate übersetzen).

Ein paar Änderungen:

• Sie immer translate bis in die Mitte der Leinwand. Wenn du die Bombe fallen lassen willst, musst du die Leinwand immer mehr übersetzen.

• Ein Tippfehler: In drawImage Sie width sowohl für die Breite & Höhe Argument verwendet haben.

• Eine Effizienz: context.save and context.restore sind teurer Operationen, weil sie & speichern alle Leinwandstile speichern. Stattdessen ist es effizienter, nur Ihre Transformationen zurücksetzen (übersetzen, zu drehen) mit context.setTransform(1,0,0,1,0,0)

Hier ist der Code für diese Änderungen Refactoring:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var bomb; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/danger.png"; 
 
function start(){ 
 
    var aa=img.width*img.width; 
 
    var bb=img.height*img.height; 
 
    var cc=Math.sqrt(aa+bb); 
 
    bomb={ 
 
     x:150,y:-img.height/2, 
 
     degrees:0,image:img, 
 
     maxRotatedHalfHeight:cc/2 
 
    }; 
 
    requestAnimationFrame(animate); 
 
} 
 

 
function drawRotated(b){ 
 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
 
    ctx.save(); 
 
    ctx.translate(b.x,b.y); 
 
    ctx.rotate(b.degrees*Math.PI/180); 
 
    ctx.drawImage(b.image,-b.image.width/2,-b.image.height/2); 
 
    ctx.restore(); 
 
} 
 

 
function animate(time){ 
 
    drawRotated(bomb); 
 
    bomb.y+=1; 
 
    bomb.degrees+=1; 
 
    if(bomb.y<=canvas.height+bomb.maxRotatedHalfHeight){ 
 
     requestAnimationFrame(animate); 
 
    }else{ 
 
      alert('Animation is complete.'); 
 
    } 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=175></canvas>