firefox下html5 canvas性能不佳答案

【问题标题】：Poor performance of html5 canvas under firefoxfirefox下html5 canvas性能不佳
【发布时间】：2011-03-18 03:44:12
【问题描述】：

我有以下html5代码：

<canvas id="myCanvas" width=600 height=600>
</canvas>

后跟一些javascript：

<script type="text/javascript">
<!--
    var img = new Image();
    img.addEventListener('load', function()
    {
        reDraw('', this);
    }, false);

    img.src = "wood.png";

    function reDraw(canv, image)
        {
        var canvas = canv;
        if (canvas == '')
        {
            canvas = $("canvas");
        }

        var size = canvas.attr("width");
        var elem = canvas.get(0);

        if (!elem || !elem.getContext){
            return;
        }

        var context = elem.getContext('2d');
        if (!context || !context.drawImage)
            {
            return;
        }

        context.drawImage(image, 0, 0, size, size);
    };


    window.onresize = function() {
        var size = window.innerWidth;
        if (window.innerHeight < size)
        {
            size = window.innerHeight;
        };
        size = size/2;

        $("canvas").each(function()
        {
            $(this).attr({width: size, height: size});
            reDraw($(this), img);
        });
    };

// -->
</script>

现在的问题是，在 Chrome 下这段代码运行顺利，但在 FireFox (3.6.15) 下，当我调整窗口大小时，它需要一段时间才能工作。可能是什么问题？以及如何修复它，让它在FF下也能顺利运行？

【问题讨论】：

这很有趣。我已经在 Ubuntu 下重新安装了我的 nVidia GeForce 驱动程序（巧合：自动更新），现在两个浏览器都可以正常工作了。 “几乎”是指现在调整大小不是“实时”的，而是出现一个代表新大小的框架。尽管如此，现在在 FF 下没有性能受到影响。

标签： javascript html browser canvas resize-image

【解决方案1】：

Firefox's drawImage function has poor performance

您可能需要考虑在 onresize 中添加一个 setTimeout 函数，以防止它在用户拖动窗口时尝试重绘以提高性能。

【讨论】：