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 に答える