Html5 canvas 如何使用canvas元素利用加速图形

我有一个html页面，我使用一个通用处理程序为我的img控件获取一个字节数组

我最近开始使用canvas元素

在将图像加载到隐藏的img变量后，我将其加载到画布中

我想尽快刷新/更改此图像

我读到canvas利用了硬件加速的图形

这是由canvas元素自动处理的吗？我需要添加其他代码吗

我是否需要特定的图形卡，还是取决于安装的图形驱动程序

这是我目前的代码：

我调用一个返回

context.Response.BinaryWrite(data);

这会将图像加载到图像变量中

var myIMG= new Image();

当它遇到该图像变量的onload事件时，它会绘制到画布上：

    var c1 = document.getElementById("live1x4");
    var ctx1 = c1.getContext("2d");
    c1.setAttribute('width', '360');
    c1.setAttribute('height', '288');
    img1x4.onload = function () {
        ctx1.drawImage(img1x4, 0, 0);
    };
    img1x4.onerror = function () {
        $("#divMode5").html('error#1');
    };

---

HTML5Canvas可以自动使用任何现有的GPU来加速图形

只需确保安装了最新的浏览器（一些旧浏览器不使用GPU）

如果你只是在画布上画一个屏幕外的img元素，那就是GPU加速

context.drawImage(myImageElement,0,0);

---

我看到你在用字节数组做某事。因此，我应该提到.getImageData和.putImageData不使用GPU进行加速

嗨，谢谢你的发帖。你已经回答了我的要点。我刚刚添加了我使用的代码。我担心，因为我使用的是图像变量1st，所以我会失去使用canvas元素获得的任何性能增益。你知道吗？谢谢我猜myIMG和img1x4是一样的？如果是这样，那么您的drawImage是GPU加速的。顺便说一句，您可以使用此快捷方式设置画布宽度/高度：c1。宽度=360；c2.高度=288；祝你的项目好运@马克-你能提供链接，你读到画布有gpu加速吗？这是画布规范中的某个地方，还是只是浏览器的实现？在哪里可以看到哪些浏览器在画布上有gpu加速？