Question

我有简单的画布标签，并尝试将其用作我项目的图形绘图区域。以下是代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <canvas id="canvas" width="1600" height="160" style="background-image: url(ecg_back.png); style="background-color: black;"></canvas>
    <script type='text/javascript'>

         var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#dbbd7a";
        ctx.fill();

        var fps = 60;
        var n = 1;


        var data = [
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82, 
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 20, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
            148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82];


        drawWave();

        function drawWave() {
            setTimeout(function() {
                requestAnimationFrame(drawWave);
                ctx.lineWidth = "1";
                ctx.strokeStyle = 'green';

                // Drawing code goes here
                n += 1;
                if (n >= data.length) {
                    n = 1;
                }
                ctx.beginPath();
                ctx.moveTo(n - 1, data[n - 1]);
                ctx.lineTo(n, data[n]);
                ctx.stroke();

                ctx.clearRect(n+1, 0, 10, canvas.height);

            }, 1000 / fps);
        }


    </script>
</body>

这在Firefox和Chrome中正常运行，但在任何版本的IE中都没有。是不是我们永远不能在IE中使用canvas标签或者我写错了什么？

早期回复将不胜感激。

Answer 1

IE9没有内置的requestAnimationFrame。

您可以使用polyfill添加该功能。来自保罗爱尔兰的这里和优秀的垫片：

https://gist.github.com/paulirish/1579671

只需将此polyfill置于代码的其余部分之上：

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    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);
        };
}());

IE10应该可以正常使用。在IE10仿真模式下，您的示例适用于我。

祝你的项目好运！

HTML5标记在IE9 / 10中不起作用

1 个答案: