Question

如何使用画布围绕图像中心的“旋转”功能旋转图像，而不是围绕原点旋转。

考虑以下示例：

<html>
    <head></head>
    <body>
        <canvas id="tmp" style="width: 300px; height: 300px; border: 1px red solid" />
        <script type="text/javascript">
            var deg = 0;

            function Draw() {
                var ctx = document.getElementById('tmp').getContext('2d');

                ctx.save();
                ctx.fillStyle = "white";
                ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
                ctx.fillStyle = "red";

                ctx.rotate(deg * 0.0174532925199432957); //Convert to rad's
                ctx.fillRect(50, 50, 20, 20);
                ctx.restore();

                deg+=5;

                setTimeout("Draw()", 50);
            }

            Draw();
        </script>
    </body>
</html>

在这个例子中，红色方块围绕orgin旋转0,0。说我想围绕它的中心旋转方块。我尝试使用translate将其移动到原点然后旋转然后再次使用translate将其移回原来：

        ctx.translate(-(50 + 10), -(50 + 10));    //Move to origin
        ctx.rotate(deg * 0.0174532925199432957); //rotate
        ctx.translate(50, 50);    //move back to original location
        ctx.fillRect(50, 50, 20, 20);
        ctx.restore();

但看起来对translate函数的调用会覆盖以前的translate并且不会组合转换。那我怎么能达到我想要的效果呢？

Answer 1

这是您在寻找什么：jsFiddle？

//Move to center of rectangle
ctx.translate(60, 60);
ctx.rotate(deg * 0.0174532925199432957); //rotate
//Draw rectangle
ctx.fillRect(-10, -10, 20, 20);
ctx.restore();

请注意，您应该使用Math.PI/180而不是那个大小数我还在画布上正确设置了width和height，并将您的setTimeout更改为不使用eval()。

HTML5用画布旋转图像

1 个答案: