2

作为主题。我想旋转一个对象，但我不想让它移动到任何地方，只需旋转它并将其留在原处。函数 draw 只是绘制矩形。

    <!DOCTYPE html>
    <html>
        <head>
            <script>
            var ctx, canvas;

                window.onload = function(){
                    canvas = document.getElementById('myCanvas');
                    ctx = canvas.getContext('2d');
                    //sciana


                        draw();


                }
            function draw() {
                    //ctx.scale(0.5,0.5);
                    ctx.rotate(Math.PI /6);//here I rotate but it moves...
                    ctx.fillRect( 100, 100, 50, 50);


                    }

            </script>
        </head>
        <body>
            <canvas id="myCanvas" width="600" height="600" style="background-color:#D0D0D0">
                Twoja przeglądarka nie obsługuje elementu Canvas.
            </canvas>
        </body>
    </html>
4

3 回答 3

1 
Draw - with shape centered at 0,0
Rotate
Translate - to cx,cy , where cx,cy is the center of the shape, where it is to be located.

为了达到这种效果，您必须以完全相反的顺序对 2D 上下文进行函数调用，如下所示：

context.translate(cx, cy);
context.rotate   (radians);
context.fillRect (x, y, width, height);
于 2012-10-23T23:52:56.703 回答
0

只需使用 CSS3 的rotate属性。

  -webkit-transform: rotate(7.5deg); 
     -moz-transform: rotate(7.5deg); 
      -ms-transform: rotate(7.5deg); 
       -o-transform: rotate(7.5deg); 
          transform: rotate(7.5deg);

通过CSS 请

于 2012-10-23T23:28:13.577 回答
0

画布上的旋转功能围绕原点旋转，为了围绕形状的中心旋转，您需要转换到您要绘制的形状的中心，然后旋转，然后绘制形状。

您的最终代码可能如下所示：

<!DOCTYPE html>
<html>
    <head>
        <script>
        var ctx, canvas;

            window.onload = function(){
                canvas = document.getElementById('myCanvas');
                ctx = canvas.getContext('2d');
                //sciana


                draw();


            }
            function draw() {
            //ctx.scale(0.5,0.5);
                ctx.translate(125, 125);
                ctx.rotate(Math.PI /6);//here I rotate but it moves...
                ctx.fillRect(-25, -25, 50, 50);

            }

        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="600" style="background-color:#D0D0D0">
            Twoja przegladarka nie obsluguje elementu Canvas.
        </canvas>
    </body>
</html>
于 2012-10-23T23:34:52.933 回答