html5キャンバス - 同時に画像を回転して移動する

Question

私はキャンバスで画像を回転させる方法を見つけましたが、同時に画像を回転して移動するアニメーションの作成に問題があります。これは私がすでに持っているものです：

var img; 
var context; 
var processID; 
var i = 0; 
var rectWidth = 64; 
var rectHeight = 64; 
window.onload = function(){ 
     var canvas = document.getElementById("canvas"); 
     context = canvas.getContext("2d"); 
     context.translate(canvas.width/2, canvas.height/2); 
     processID = setInterval(draw,1000/100); 
    } 
    function draw() { 
     if(i <= 360) { 
      context.clearRect(-canvas.width/2, -canvas.width/2, canvas.width, canvas.height);  
      context.strokeRect(-rectWidth/2, -rectHeight/2, rectWidth, rectHeight); 
      context.rotate(1 * Math.PI/180); 
      i++; 
     } else { 
      clearInterval(processID); 
     } 
    } 

今私の四角形が回転している最上部に移動します。私は本当にここで失われて、いくつかの助けに感謝します。

Answer 1

だから幸運にも私は答えを見つけた：

var img; 
var context; 
var processID; 
var i = 0; 
var rectWidth = 64; 
var rectHeight = 64; 
window.onload = function(){ 
    var canvas = document.getElementById("canvas"); 
    context = canvas.getContext("2d"); 
    processID = setInterval(draw,1000/100); 
} 
function draw() { 
    if(i <= 360) { 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     context.save(); 
     context.translate(canvas.width/2, i+(canvas.height/2)); 
     context.rotate(i * Math.PI/180); 
     context.strokeRect(-rectWidth/2, -rectHeight/2, rectWidth, rectHeight); 
     context.restore(); 
     i++; 
    } else { 
     clearInterval(processID); 
    } 
} 

Answer 2

translateメソッド、またはより一般的にはtransformメソッドを使用できます。自分自身をあなたが何ができるかの参考のためにthe docsを参照してください、そしてthe wiki page for Transformation Matrices