Javascript 画布的旋转没有按照我的预期进行

我希望矩形在适当的位置旋转。但现在它在旋转，好像在中心有一个物体，我的物体围绕着它旋转，就像我们在太阳系看到的一样。我想让我的物体原地旋转，而不是绕着什么东西旋转。我该怎么做

这是我目前的代码：

<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>

---

旋转矩形之前，必须将上下文转换到矩形的中心：

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

使用

平移（x，y）

，

旋转（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;
}

---

对于一个旋转矩形

您在哪里应用旋转代码？尝试将context.rotate（弧度）添加到startAnim（）函数中@阿曼·切瓦尔：非常抱歉。见我编辑的帖子。

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