0

回転した線を描画し、回転した後、線の始点と終点に点を描画しようとします。

これは私のコードです（正しく機能しません）

<!-- language: lang-html -->
<html><head><title>test</title></head><body>

    <canvas id="canvas" width="100" height="100"></canvas>

    <script type="text/javascript">

        var _context = document.getElementById("canvas").getContext('2d');

        var x = 40;
        var y = 40;
        var angle = 0.2;

        _context.beginPath();
        _context.translate( x, y);

        //rotate and draw line
        _context.rotate( angle );
        _context.moveTo( 0, 0);
        _context.lineTo( 0, 40);
        _context.stroke();

        //calculate the new x,y position from line
        x = x * Math.cos( angle ) - y * Math.sin( angle );
        y = x * Math.sin( angle ) + y * Math.cos( angle );

        //draw a point to this coords
        _context.save();
        _context.fillStyle = "orange";
        _context.beginPath();
        _context.arc( x, y, 4, 0, 2*Math.PI, true);
        _context.fill();

    </script>
</body></html>

jsFiddleデモ：http ：//jsfiddle.net/UT29j/

誰かアイデアがありますか？

4

1 に答える 1

1

回転と平行移動は、描画されるすべてのものに適用されます。自分で座標を操作する必要はありません。

<html><head><title>test</title></head><body>

    <canvas id="canvas" width="100" height="100"></canvas>

    <script type="text/javascript">

        var _context = document.getElementById("canvas").getContext('2d');

        var angle = 0.2;

        // rotate and translate
        _context.translate(40, 40);
        _context.rotate( angle );

        // draw line
        _context.beginPath();
        _context.moveTo( 0, 0);
        _context.lineTo( 0, 40);
        _context.stroke();

        //draw a point to this coords
        _context.save();
        _context.fillStyle = "orange";
        _context.beginPath();
        _context.arc(0, 40, 4, 0, 2*Math.PI, true);
        _context.arc(0, 0, 4, 0, 2*Math.PI, true);
        _context.fill();
    </script>
</body></html>
于 2013-01-02T20:03:02.553 に答える