2

キャンバス上で回転する繰り返しアイコンをアニメーション化しようとしていますが、画像の中心で回転していません。正しく回転させるにはどうすればよいかわかりません。

setInterval(draw, 30);
    var degrees = 0.0;

    function draw() {

        var canvas = document.getElementById('tutorial');

        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, 16, 16);
            degrees += 0.10;

            ctx.save();

            ctx.translate(8,8);
            ctx.rotate(degrees);

            // Draw half open circle
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.arc(8, 8, 6, 0, 1.75 * Math.PI);
            ctx.stroke();

            // Draw arrowhead
            ctx.lineWidth = 2;
            ctx.moveTo(13, 1);
            ctx.lineTo(9, 5);
            ctx.lineTo(13, 5);
            ctx.lineTo(13, 1);
            ctx.stroke();

            ctx.restore();
        }
    }

フィドル: http://jsfiddle.net/xTFkU/

4

2 に答える 2

2

キャンバスを回転させて移動させていましたが、キャンバスが移動されていないかのように描画機能を実行してから描画しました。

基本的に、キャンバスを描画している画像の幅と高さの半分に変換する必要があります。これにより、画像の中心が 0,0 になります。次に、すべての座標からオフセットを減算します。

私がしたことは、幅と高さを 2 で割ったオフセット値を追加することでした。次に、キャンバスをそのオフセットで変換し、すべての座標からそのオフセットを差し引きました。

ワーキングデモ

(function() {

    setInterval(draw, 30);
    var degrees = 0.0;
    var offset = 8;
    function draw() {

        var canvas = document.getElementById('tutorial');

        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, 16, 16);
            degrees += 0.10;

            ctx.save();

            ctx.translate(offset, offset);
            ctx.rotate(degrees);

            // Draw half open circle
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.arc(8-offset , 8-offset, 6, 0, 1.75 * Math.PI);
            ctx.stroke();

            // Draw arrowhead
            ctx.lineWidth = 2;
            ctx.moveTo(13-offset , 1-offset);
            ctx.lineTo(9-offset , 5-offset);
            ctx.lineTo(13-offset , 5-offset);
            ctx.lineTo(13-offset , 1-offset);
            ctx.stroke();

            ctx.restore();
        }
    }
})();​
于 2012-09-13T12:52:33.667 に答える
0

ctx.translate(8,8);座標の原点をキャンバスの中心に移動してから回転させました。0/0ここで、点 ( ) の周りではなく、中心 ( ) の周りに円を描く必要があります8/8: http://jsfiddle.net/xTFkU/4/。または、回転した座標系を元に戻すこともできますctx.translate(-8,-8);: http://jsfiddle.net/xTFkU/5/

于 2012-09-13T13:00:03.510 に答える