Javascript 更改画布上每个形状的速度

如何改变每个形状的速度

我试着玩

pct

，但我猜这是错误的方式：

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

window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

// shape stuff
var shapes = [];
var points;
// shape#1
points = pointsToSingleArray([{
    x: 20,
    y: 20
}, {
    x: 50,
    y: 100
}, {
    x: 75,
    y: 20
}, {
    x: 100,
    y: 100
}]);
shapes.push({
    width: 20,
    height: 10,
    waypoints: points,
    color: "red"
});
// shape#2
points = pointsToSingleArray([{
    x: 0,
    y: 0
}, {
    x: 180,
    y: 0
}, {
    x: 180,
    y: 180
}, {
    x: 0,
    y: 180
}, {
    x: 0,
    y: 0
}, {
    x: 100,
    y: 80
}]);
shapes.push({
    width: 20,
    height: 20,
    waypoints: points,
    color: "blue"
});

// animation stuff
var index = 0;
var fps = 60;
// start animating
animate();


function pointsToSingleArray(points) {

    // array to hold all points on this polyline
    var allPoints = [];

    // analyze all lines formed by this points array
    for (var a = 1; a < points.length; a++) { // loop through each array in points[]

        // vars for interpolating steps along a line
        var dx = points[a].x - points[a - 1].x;
        var dy = points[a].y - points[a - 1].y;
        var startX = points[a - 1].x;
        var startY = points[a - 1].y;

        // calc 100 steps along this particular line segment
        for (var i = 1; i <= 100; i++) {
            var pct = Math.min(1, i * .01);
            var nextX = startX + dx * pct;
            var nextY = startY + dy * pct;
            allPoints.push({
                x: nextX,
                y: nextY
            });
        }

    }
    return (allPoints);
}


function animate() {
    setTimeout(function () {

        // this flag becomes true if we made any moves
        // If true, we later request another animation frame
        var weMoved = false;

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

        // draw all shapes
        for (var i = 0; i < shapes.length; i++) {

            // get reference to next shape
            var shape = shapes[i];

            // check if we still have waypoint steps for this shape
            if (index < shape.waypoints.length) {

                // we're not done, so set the weMoved flag
                weMoved = true;

                // draw this shape at its next XY
                drawShape(shape, index);

            } else {

                // we're done animating this shape
                // draw it in its final position
                drawShape(shape, shape.waypoints.length - 1);

            }
        }

        // goto next index XY in the waypoints array
        // Note: incrementing by 2 doubles animation speed
        index += 2;


        // if weMoved this frame, request another animation loop
        if (weMoved) {
            requestAnimFrame(animate)
        };


    }, 1000 / fps);
}

function drawShape(shape, waypointIndex) {
    var x = shape.waypoints[waypointIndex].x;
    var y = shape.waypoints[waypointIndex].y;
    ctx.fillStyle = shape.color;
    ctx.fillRect(x, y, shape.width, shape.height);
}

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
window.requestAnimFrame=（函数（回调）{
返回window.requestAnimationFrame | | window.webkitRequestAnimationFrame | | window.mozRequestAnimationFrame | | | window.oRequestAnimationFrame | | window.msRequestAnimationFrame | | |函数（回调）{
设置超时（回调，1000/60）；
};
})();
//形状材料
变量形状=[]；
var点；
//形状#1
points=pointsToSingleArray([{
x:20，
y:20
}, {
x:50，
y:100
}, {
x:75，
y:20
}, {
x:100，
y:100
}]);
推({
宽度：20，
身高：10，
航路点：点，
颜色：“红色”
});
//形状#2
points=pointsToSingleArray([{
x:0,，
y:0
}, {
x:180，
y:0
}, {
x:180，
y:180
}, {
x:0,，
y:180
}, {
x:0,，
y:0
}, {
x:100，
y:80
}]);
推({
宽度：20，
身高：20，
航路点：点，
颜色：“蓝色”
});
//动画素材
var指数=0；
var fps=60；
//开始制作动画
制作动画（）；
函数pointsToSingleArray（点）{
//阵列以容纳此多段线上的所有点
var-allPoints=[]；
//分析此点阵列形成的所有线
对于（var a=1；a
var index = [0, 0];
shapes.push({
    width: 20,
    height: 10,
    waypoints: points,
    color: "red",
    speed: 10,
});
index[i] += shape.speed;