javascript - Canvas 的旋转没有按照我的预期发生

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和 Simple jsFiddle demo用一个旋转矩形