javascript - FF 中 Canvas 图像滚动性能

标签 javascript performance html firefox canvas

我在 FF 中遇到了严重的性能问题。

这是代码:

JS:

var img = new Image();  
img.src = 'image.jpg'; 

var w = $(window).outerWidth();
var h = $(window).height();

var addit = -1;
var scrollSpeed = 10; //fast in IE, but very slow in FF
var current = 0;

ctx = document.getElementById('canvas1').getContext('2d');

var init = setInterval(function(){
        current += addit;
        ctx.drawImage(img,current,0, w, h);
           }, scrollSpeed);

CSS:

    #canvas1 {
        width:auto;
        height:100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    body {
        overflow: hidden;
    }

HTML:

<body>
 <canvas id="canvas1" width="1784px" height="534px"></canvas>
</body>

image.jpg 为 1784x534px

有人可以帮助我在 FF 中获得与 IE 相同的性能吗? 我尝试过使用 CSS left 属性,但性能仍然很慢。 谢谢!

最佳答案

经过对硬件加速的一些调查;我在 Firefox“about:support”中注意到“Direct2D Enabled”被错误版本的图形驱动程序阻止。

我更新了它,现在由于硬件加速,速度变得更快了。

关于javascript - FF 中 Canvas 图像滚动性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9001578/

相关文章:

javascript - 需要 highcharts-browserify 才能使用特定版本的 highcharts?

javascript - 如何在特定元素之后但另一个元素之前插入

javascript - 在 typescript 中 trim 特殊字符之前获取输入[文本]值

javascript - ctx.lines() 在 Mac 上最多需要 8.7 秒,但在任何其他浏览器中不到 1 毫秒

javascript - 仅使用应用程序缓存来缓存图像

javascript - Google Maps API v3 返回 ZERO_RESULTS 但 Maps.Google.com 显示正常

mysql - 使用 HAVING 子句的慢查询 - 我可以加快速度吗?

python - 在没有并行化的情况下提高功能的性能

html - 为什么这个技巧在动态高度 div 中垂直居中文本(以及它为什么会中断)?

html - 按钮相对于内容的位置