javascript - ie9中报错requestAnimationFrame任何替代解决方案

Question

我正在创建 Canvas(我是这个 Canvas 的新手)对象圆柱体，这在 Chrome 和 Firefox 中运行良好，但是当我在 ie9 中打开相同的文件时。

我收到错误消息，因为“requestAnimationFrame”未定义

当我用谷歌搜索错误时，它说 requestAniationFrame 无法在 ie9 上工作。

任何人都可以帮助我解决这个问题吗我们有任何替代方法来解决这个问题。

这是我的代码

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

        var degreeAngle = 0;
        requestAnimationFrame(animate);

        function drawRotatedCylinder(x, y, w, h, degreeAngle) {
            context.save();
            context.translate(x + w / 10, y + h / 10);
            context.rotate(degreeAngle * Math.PI / 180);
            drawCylinder(-w / 10, -h / 10, w, h);
            context.restore();
        }   
function animate() {
        //requestAnimationFrame(animate);
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawRotatedCylinder(100, 100, 180, 180, degreeAngle++);
}

请帮助我解决上述问题

谢谢问候摩诃

Answer 1

Erik Möller 开发了一个健壮的 polyfill，Paul Irish 现在将其托管在他的 blog post about requestAnimationFrame 中.如果使用此代码，则几乎可以在任何浏览器中透明地使用 requestAnimationFrame:

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());