Question

我有一个javascript计时器。

它以200ms的间隔刷新img src。

我看过画布对象。我不确定是否建议使用画布而不是img元素？

我正在对两者进行测试，但看不出性能上的任何差异。

这是我使用timer / img：

的代码

这是我的代码：

var timer4x4
var cache4x4 = new Image();
var alias = 'test';
var lastUpdate = 0;



function setImageSrc4x4(src) {
    live4x4.src = src;
    timer4x4 = window.setTimeout(swapImages4x4, 200);
}

function swapImages4x4() {
    cache4x4.onload = function () {
        setImageSrc4x4(cache4x4.src);
    };

    cache4x4.onerror = function () {
        setImageSrc4x4("http://127.0.0.1/images/ERROR.jpg");
    };
    cache4x4.src = null;
    cache4x4.src = 'http://127.0.0.1/Cloud/LiveXP.ashx?id=' + createGuid() + '&Alias=' + alias + '&ReSync=' + reSync;
    reSync = 0;
}

* nb将添加一些画布代码

我将图像从客户端桌面PC流式传输到我的网络服务器。我试图尽可能多地显示图像（FPS）。该图像是4个较小图像的容器。缝合在客户端上并发送到服务器。

我有谷歌搜索，它说如果做像素操作和aniumation使用画布。

但是，我只是做动画。

由于

Answer 1

canvas元素旨在绘制/编辑/与其中的图像进行交互。如果您只是显示图像，那么您不需要它，简单的img是语义上正确的选择（在更多设备上兼容的额外好处）。

在这两种情况下，性能都相似（如果不相同），因为唯一要发生的是图像被下载。

Answer 2

虽然在性能方面你不会注意到很大差异，因为你仍然不能完全依赖HTML5支持，最好现在最好采用img - 解决方案。

什么是最好使用canvas或img进行频繁更新？

2 个答案: