0

我在画布上绘制了四个矩形，每边一个，自动来回（或上下）。我想要创建的是蛇效果，例如，我的动画从顶部的矩形开始一直到结束，canvas.width然后我右侧的矩形将从上到下开始动画等等与其他矩形。我该怎么做才能实现这种动画？

查看我的代码：https ://jsfiddle.net/4kdrLde8/

function drawRecTop(recTop, context) {
    context.beginPath();
    context.rect(recTop.x, recTop.y, recTop.width, recTop.height);
    context.fillStyle = '#FB0202';
    context.fill();
}

function drawRecRight(recRight, context) {
    context.beginPath();
    context.rect(recRight.x , recRight.y , recRight.width, recRight.height);
    context.fillStyle = '#FB0202';
    context.fill();
}

function drawRecBottom(recBottom, context) {
    context.beginPath();
    context.rect(recBottom.x , recBottom.y , recBottom.width, recBottom.height);
    context.fillStyle = '#FB0202';
    context.fill();
}

function drawRecLeft(recLeft, context) {
     context.beginPath();
     context.rect(recLeft.x , recLeft.y , recLeft.width, recLeft.height);
     context.fillStyle = '#FB0202';
     context.fill();
}

function animate(myRectangle, canvas, context, startTime) {
    // update
    recTop.x ++;
    recRight.y ++;
    recBottom.x -- ;
    recLeft.y --;

    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);

    drawRecTop(recTop, context);
    drawRecRight(recRight, context);
    drawRecBottom(recBottom, context);
    drawRecLeft(recLeft, context);


    // request new frame
    requestAnimFrame(function() {
        animate(myRectangle, canvas, context, startTime);
    });
}


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

var recTop = {
    x: -180,
    y: 0,
    width: 150,
    height: 20
};

var recRight = {
    x: 480,
    y: 0,
    width: 20,
    height: 150
};

var recBottom = {
    x: 480,
    y: 480,
    width: 150,
    height: 20
};

var recLeft = {
    x: 0,
    y: 480,
    width: 20,
    height: 150
};

// wait one second before starting animation
setTimeout(function() {
    var startTime = (new Date()).getTime();
    animate(recTop, canvas, context, startTime);
}, 2000);
4

0 回答 0