html5 canvas - вращать и перемещать изображение одновременно

Question

Я уже узнал, как вращать изображение с помощью canvas, но у меня возникли проблемы при создании анимации, которая вращает и перемещает изображение одновременно.Это то, что у меня уже есть:

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.См. документы для справки о том, что вы можете сделать, и страницу вики для Матриц преобразования