如何使用画布元素来利用加速图形

Question

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

我最近开始使用 canvas 元素。

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

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

我已经读到画布利用了硬件加速图形。

这是由 canvas 元素自动处理的吗？我需要添加任何额外的代码吗？

我需要特定的显卡还是取决于安装的显卡驱动程序？

这是我目前的代码：

我调用一个通用处理程序 ashx 页面返回

context.Response.BinaryWrite(data);

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

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');
    };

Answer 1

Html5 Canvas 会在可能的情况下自动使用任何现有的 GPU 来加速图形。

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

如果您只是在画布上绘制一个屏幕外的 img 元素，那是 GPU 加速的。

context.drawImage(myImageElement,0,0);

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