html5 canvas - 同时旋转和移动图像答案

【问题标题】：html5 canvas - rotate and move an image at the same timehtml5 canvas - 同时旋转和移动图像
【发布时间】：2011-11-22 05:44:58
【问题描述】：

我已经知道如何使用画布旋转图像，但是我在创建动画时遇到了问题，该动画同时旋转和移动图像。这是我已经拥有的：

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

所以现在我希望我的方块在旋转时移动到顶部。我真的迷路了，希望能得到一些帮助。

【问题讨论】：

标签： javascript animation html5-canvas

【解决方案1】：

您可以使用translate 方法，或者更通用的transform 方法。请参阅 the docs 了解您可以做什么，以及 the wiki page for Transformation Matrices

【讨论】：

【解决方案2】：

很幸运我自己找到了答案：

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

【讨论】：