0

キャンバスを使用して、ある点から別の点に連続して移動する単一の線をアニメーション化しようとしています。（彼があちこち飛んでいる時のインディ・ジョーンズの映画の地図のように）.

これを機能させる方法がわかりません。私の現在のコードは塗りつぶされた三角形を作ります。きちんとしていますが、私はヴィーの形が自分自身を描くのを見たいです. 助言がありますか？

ありがとう

これが私のコードです

4

2 に答える 2

1

作業デモ

これが私がまとめた簡単な方法です。決して完璧ではありません。線の代わりに四角形を使用しますが、描画速度を速くしたい場合（またはタイムアウトメソッドの更新時間を変更したい場合）は、簡単に線に変更できます。開始x/yを開始したい場所に変更し、ポイントの配列を関数に渡すだけで、各ポイントに線が引かれ、なくなるまで続きます。

var canvas = document.getElementById("canvasWindow");
var c = canvas.getContext("2d");

var curPoint = {
    x : 0,
    y : 0,
    index : 0   
}

var points = [{x:10, y:20}, {x:100, y:100}, {x:50, y:150}, {x:0,y:0}];
    
function toPoints(points){
    var targetPoint = points[curPoint.index];
    var tx = targetPoint.x - curPoint.x,
        ty = targetPoint.y - curPoint.y,
        dist = Math.sqrt(tx*tx+ty*ty),
        rad = Math.atan2(ty,tx),
        angle = rad/Math.PI * 180;;
     
        velX = (tx/dist)*1;
        velY = (ty/dist)*1;

    curPoint.x += velX;
    curPoint.y += velY;

    if(dist < 2){
        curPoint.index++;
    }

    c.fillRect(curPoint.x, curPoint.y, 1, 1);
    if(curPoint.index < points.length){
        setTimeout(function(){toPoints(points)}, 10);
    }
}

toPoints(points);
于 2012-06-21T16:06:53.770 に答える
0

正確な目標はわかりませんがc.beginPath();、三角形を塗りつぶさずに線を描きたいだけの場合は、1つか2つ欠けている可能性があります。

（すみません、この映画はわかりません...）

于 2012-06-21T15:59:09.847 に答える