Javascript 画布-提高动画速度而不抖动

如何提高画布动画的速度并仍然获得平滑移动的对象

在我的例子中，一个男孩从画布的顶部移动到底部。运动似乎在震动，y步越大。我怎样才能避免颠簸，并且仍然快速地向底部移动

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

(function animloop() {
    requestAnimFrame(animloop);
    redraw();
})();


function redraw() {

    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    ctx.beginPath();
    ctx.rect(20, y, 90, 90);
    ctx.fillStyle = "red";
    ctx.fill();
    y += 5;

}

---

通过减少每帧移动的距离并增加帧速率，可以提高画布动画的速度，同时仍然可以获得平滑移动的对象

RequestAnimationFrame是在给定硬件的情况下以合理的帧速率制作动画的一种有效方法，但它修复了帧速率

setInterval(function () {
  redraw();
}, 2);

您可以使用setInterval或setTimeout来更好地控制帧速率，它接受第二个整数参数，该参数确定距离下一次回调的毫秒数（即帧速率）

---

通过直接增加requestAnimationFrame回调中的y位置，动画将根据帧速率在不同的设备上显示不同，您应该使用基于时间的动画（），并且可能会导致闪烁，因为您正在清除整个画布，然后重绘场景，您可以尝试通过翻转2个画布元素（）