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