火狐在HTML5画布的表现不佳 [英] Poor performance of html5 canvas under firefox

问题描述

我有以下HTML5 code：

I have the following html5 code:

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

其次是一些javascript：

followed by some 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的根据本code工程进展顺利，但Firefox下（3.6.15），当我调整窗口的大小，那么它需要一段时间来工作。可以采取什么问题？以及如何修复它，所以它也将顺利下FF工作？

Now the problem is that under Chrome this code works smoothly, but under FireFox (3.6.15) when I resize the window, then it takes a while to work. What can be the problem? And how to fix it, so it would also work smoothly under FF?

推荐答案

Firefox的drawImage方法有表现不佳

您可能要考虑从尝试当用户拖动窗口来提高性能重绘中加入的onResize一个setTimeout函数，以prevent它。

You might want to consider adding a setTimeout function in the onresize to prevent it from trying to redraw while the user is dragging the window to improve performance.

这篇关于火狐在HTML5画布的表现不佳的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！