什么是最好的使用画布或img频繁更新？

Question

我有一个javascript计时器。

它在200 It的间隔内刷新img。

我看了一下画布上的东西。我不确定是否建议使用画布而不是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将在位内添加画布代码。

我是流式图像从我的客户端桌面电脑到我的网络服务器。我试图显示尽可能多的图像(FPS)。图像是4个较小图像的容器。在客户端上缝合并发送到服务器。

我在谷歌上搜索过，它说如果做像素操作和阴离子化，使用画布。

但是，我只是在做动画。

谢谢

Answer 1

canvas元素旨在绘制/编辑/与其中的图像进行交互。如果您所做的只是显示图像，那么您就不需要这样做了，而一个简单的img在语义上是正确的选择(增加了在更多设备上兼容的额外好处)。

在这两种情况下，性能都是相似的(如果不是相同的话)，因为唯一发生的事情是下载图像。

Answer 2

虽然就性能而言，您不会注意到有什么不同，因为您还不能完全依赖HTML5支持，所以最好现在使用img-solution。