0

canvasJavaScript と HTML5要素でアニメーションを作ろうとしてうまくいきません。

キャンバスの右下隅から開始するアニメーションが必要です。アニメーションは、斜めに右上隅に移動し、反対方向に戻って前後の動きを作成します。

アニメーションを斜め​​に動かすことはできますが、方向を変えることはできません。また、何をしてもアニメーションを下から開始するのに問題があります。

以下のコードは現在、アニメーションを上から下に斜めに移動します。

var context;
var x = 0;
var y = 0;
var stepx = 1.55;
var stepy = 1.55;

function setupAnimCanvas() {
    var canvas = document.getElementById('assignmenttwoCanvas');
    if (canvas.getContext) {
        ctx = canvas.getContext('2d');
        setInterval('draw();', 20);
        img = new Image();
        img.src = '../images/dragon.png';
        //animation();
    }
}

startPos = (500, 500);
endPos = (0, 0);

function draw() {
    ctx.clearRect(0,0, 500,500);
    drawBackground();
    ctx.drawImage(img, y, x);
    x += 3;
    if(x < endPos){
        x -= stepx;
        y += stepy;
    }
    else if (y > endPos) {
        x += stepx;
        y -= stepy;
    }
    else {
        endPos = startPos;startPos = y;
    }
        moveit();
        setTimeout('mover()',25);
}
4

1 に答える 1

0

x と y にはデルタ値を使用できます。x または y の位置が start または end にある場合は、delta = -delta; を設定してデルタを逆にします。

var dx = -3, dy = -3;

次に、方向を逆にする基準を確認します。

if (x < endPos[0] || x > startPos[0] || y < endPos[1] || y > startPos[1] ) {
    dx = -dx;
    dy = -dy;
}

ここでデモを参照してください:
http://jsfiddle.net/AbdiasSoftware/5dSSZ/

これの本質 (fiddler-link のコメントと元のソース行を参照)

var startPos = [500, 500];
var endPos = [0, 0];
var dx = -3, dy = -3;
var x = startPos[0], y = startPos[1];

function draw() {
    ctx.clearRect(0, 0, 500, 500);
    ctx.fillRect(x, y, 20, 20); //for demo as no image
    x += dx;
    y += dy;

    if (x < endPos[0] || x > startPos[0] ||
        y < endPos[1] || y > startPos[1] ) {
        dx = -dx;
        dy = -dy;
    }
    setTimeout(draw, 16); //requestAnimationFrame is a better choice
}
于 2013-06-10T08:25:40.613 に答える