Leinwand animieren Bilder Rotation

Question

Ich möchte einen Hintergrund für mein Skript auf einer Leinwand erstellen, die Bilder fallen lassen und den Bildschirm nach unten drehen. Könnte mir jemand erklären, wie ich ein Bild drehen und dann mit dem Element <canvas> auf den Bildschirm zeichnen würde? Ich habe den folgenden Code:

Equations.prototype.Draw = function() { 
     //increases the rotational value every loop 
     this.rotate = (this.rotate + 1) % 360; 
     //rotates the canvas 
     ctx.rotate(this.rotate*Math.PI/180); 
     //draw the image using current canvas rotation 
     ctx.drawImage(this.img,this.x,this.y); 
     //restore canvas to its previous state 
     ctx.rotate(-this.rotate*Math.PI/180); 
    }; 

ich dies versuchen und feststellen, dass die dreht Bild, sondern bewegt sich auch auf dem Bildschirm als auch in einer Kreisform um den Punkt (0,0) ich es an der gleichen Stelle bleiben wollen auf der Stelle drehen. Wie würde ich das beheben danke!

Answer 1

Speichern Sie die context, umwandeln, drehen, malen, wiederherstellen.

function rand (min, max) { 
 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
 
} 
 

 
var ctx = document.getElementById('cvs').getContext('2d'), 
 
    RAD = Math.PI/180, 
 
    width = window.innerWidth, 
 
    height = window.innerHeight, 
 
    fallingIconsAll = [], 
 
    FallingIcon = function() { 
 
     this.x = rand(0, width); 
 
     this.y = rand(0, height); 
 
     this.h = 32; 
 
     this.w = 32; 
 
     this.angle = rand(0, 360); 
 
     this.speed = rand(1, 4); 
 
     this.IMG = new Image(); 
 
     this.IMG.src = 'http://stackoverflow.com/favicon.ico'; 
 
     return this; 
 
    }; 
 
    
 
ctx.canvas.width = width, 
 
ctx.canvas.height = height, 
 

 
FallingIcon.prototype.move = function() { 
 
    // Manipulate Icon properties 
 
    if(this.y > height + this.h) { // (if has dropped) 
 
    this.y = -this.h;     // restart from top 
 
    this.x = rand(0, width);   // new X position 
 
    this.speed = rand(1, 4);   // new random speed 
 
    } 
 
    this.y += this.speed; 
 
    this.angle += this.speed % 360; 
 

 
    // Manipulate context 
 
    ctx.save();     // save context 
 
    ctx.translate(this.x, this.y); // move to point 
 
    ctx.rotate(this.angle * RAD); // rotate around that point 
 
    ctx.drawImage(this.IMG, -(this.IMG.width/2), -(this.IMG.height/2)); 
 
    ctx.restore();     // restore to initial coordinates 
 
}; 
 

 
// Create falling Icons 
 
for (var i = 0; i < 20; i++) { 
 
    fallingIconsAll.push(new FallingIcon()); 
 
} 
 

 
// Setup Canvas 
 
ctx.canvas.width = width; 
 
ctx.canvas.height = height; 
 

 
// Animation loop 
 
(function loop() { 
 
    ctx.clearRect(0, 0, width, height); 
 
    fallingIconsAll.forEach(function (Icon) { 
 
    Icon.move(); 
 
    }); 
 
    requestAnimationFrame(loop); 
 
}());

body{margin:0;} canvas{display:block;}

<canvas id="cvs"></canvas>