Question

如何改变每个形状的速度？

我尝试使用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);
}

也许有人知道改变速度的例子，或者如何使代码更好。

Answer 1

http://jsfiddle.net/4DxLL/ - 改变速度

var index = [0, 0];
shapes.push({
    width: 20,
    height: 10,
    waypoints: points,
    color: "red",
    speed: 10,
});
index[i] += shape.speed;

改变画布上每个形状的速度

1 个答案: