キャンバスアニメーション画像の回転

Question

キャンバスにスクリプトの背景を作成して、画像を倒して画面を回転させたいと思っています。だから誰かが私に画像を回転させて、それを<canvas>要素を使って画面に描画する方法を説明することができます。私はこれを試してみて、その画像の回転を見つけるだけでなく、私はそれが同じ場所に滞在したいポイント（0,0）の周りに円形にだけでなく、画面の周りに移動し

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

：私は、次のコードを持っていますその場で回転する。どのように私はこの感謝を修正するだろう！

Answer 1

contextを保存し、変換し、回転させ、ペイントして復元します。

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>