Плохая производительность холста HTML5 под Firefox
-
27-10-2019 - |
Вопрос
У меня есть следующий код 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?
Решение
Функция Drawimage Firefox имеет низкую производительность
Возможно, вы захотите подумать о добавлении функции SetTimeout в OnResize, чтобы она не пыталась перерисоваться, пока пользователь перетаскивает окно для повышения производительности.
Не связан с StackOverflow