Question

我在尝试使用JavaScript和HTML5 canvas元素制作动画时遇到了麻烦。

我需要有一个动画，从我画布的右下角开始，向上对角移动到右上角，然后向后反转另一个方向以创建来回移动。

我可以让我的动画对角移动，但后来我无法改变它的方向。无论我做什么，我也无法让动画从底部开始。

下面的代码目前将我的动画从对角线上下移动到底部。

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);
}

Answer 1

您可以对x和y使用delta值。当x或y位置处于开始或结束时，您只需通过设置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
}

Javascript动画对角线和反向移动

1 个答案: