Вращение холста не происходит, как я ожидал

Question

Я хочу, чтобы мой прямоугольник вращался на месте.Но в настоящее время он вращается так, как будто есть один объект в центре, и мой объект вращается вокруг него, то есть очень похоже на то, что мы видим в солнечной системе.Я хочу, чтобы мой объект вращался на месте, а не вращался вокруг чего-то.Как я могу это сделать?

Это мой код:

<script type="text/javascript">
    var context;
    var radian = 0.01;
    var w, h;
    $(document).ready(function () {
        w = document.width;
        h = document.height;
        var canvas = $('#canvas');
        context = canvas[0].getContext('2d');
        canvas[0].width = w;
        canvas[0].height = h;
        setInterval(startAnim, 10);
    });

    function startAnim() {

        context.save();
        context.strokeStyle = 'rgb(0,0,0)';
        context.fillStyle = 'rgb(0,0,0)';
        context.fillRect(0, 0, w, h);

        context.strokeStyle = 'rgb(0,0,0)';
        context.fillStyle = 'rgb(255,255,0)';
        context.strokeRect(0, 0, 200, 200);
        context.fillRect(0, 0, 200, 200);
        context.restore();
        context.fillStyle = 'rgb(0,255,255)';
        context.fillRect(500, 400, 200, 200);
        radian += 0.01;
    }

</script>

ОБНОВЛЕНИЕ: Извините, я экспериментировал, прежде чем отправил, и забыл добавить функцию поворотапри размещении здесь.Это фактический код:

function startAnim() {

        context.save();
        context.strokeStyle = 'rgb(0,0,0)';
        context.fillStyle = 'rgb(0,0,0)';
        context.fillRect(0, 0, w, h);

        context.translate(350, 300);
        context.rotate(radian);
        context.translate(-350, -300);

        context.strokeStyle = 'rgb(0,0,0)';
        context.fillStyle = 'rgb(255,255,0)';
        context.strokeRect(0, 0, 200, 200);
        context.fillRect(0, 0, 200, 200);
        context.restore();
        context.fillStyle = 'rgb(0,255,255)';
        context.fillRect(500, 400, 200, 200);
        radian += 0.01;
    }

Answer 1

Используйте translate(x, y), rotate(r), а затем нарисуйте прямоугольник.

function startAnim() {
    context.save();
    context.strokeStyle = 'rgb(0,0,0)';
    context.fillStyle = 'rgb(0,0,0)';
    context.fillRect(0, 0, w, h);
    //^Shouldn't clearRect() be better here?

    //Draw translated, rotated rectangle at (250, 250)
    var x = 250;
    var y = 250;
    context.save();
    context.translate(x, y);
    context.rotate(radian);
    context.fillStyle = 'rgb(255,255,0)';
    context.fillRect(0, 0, 200, 200);
    context.restore();
    //Restore context (to reverse translation and rotation)

    context.strokeStyle = 'rgb(0,0,0)';
    context.fillStyle = 'rgb(255,255,0)';
    context.strokeRect(0, 0, 200, 200);
    context.fillRect(0, 0, 200, 200);
    context.restore();
    context.fillStyle = 'rgb(0,255,255)';
    context.fillRect(500, 400, 200, 200);
    radian += 0.01;
}

jsFiddle demo и Простая jsFiddle demo с одним вращающимся прямоугольником

Answer 2

Вы должны перевести свой контекст в центр прямоугольника, прежде чем повернуть его:

context.translate(RECT_CENTER_X, RECT_CENTER_Y);
context.rotate(radian);
context.fillRect(-RECT_CENTER_X, -RECT_CENTER_Y, w, h);