Плохая производительность html5 canvas под firefox - PullRequest
Новая
       11

Плохая производительность html5 canvas под firefox

3 голосов
/ 17 марта 2011

У меня есть следующий код 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?

1 Ответ

1 голос
/ 17 марта 2011

Функция drawImage в Firefox имеет низкую производительность

Возможно, вы захотите добавить функцию setTimeout в onresize, чтобы предотвратить попытки перерисовки, пока пользователь перетаскивает окно для повышения производительности..

...