使用canvas或img进行频繁更新的最佳方式

what is best to use canvas or img for frequent updates?

本文关键字：更新 最佳 方式 行频 canvas img 使用      更新时间：2024-04-12

我有一个javascript计时器。

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

我看了一眼画布上的物体。我不确定是否建议使用画布而不是img元素？

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

这是我使用计时器的代码/ig:

这是我的代码：

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个较小图像的容器。在客户端上缝合并发送到服务器。

我在谷歌上搜索过，它说如果使用画布进行像素操作和消除。

但是，我只是在做动画。

感谢

canvas元素的设计目的是绘制/编辑/与其中的图像交互。如果你所做的只是显示图像，那么你就不需要了，简单的img是语义正确的选择（还有在更多设备上兼容的额外好处）。

在这两种情况下，性能将是相似的（如果不相同的话），因为唯一会发生的事情就是下载图像。

虽然从性能角度来看，您不会注意到太大的差异，因为您还不能完全依赖HTML5支持，所以现在最好使用img-解决方案。

相关文章：