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）。

如果你只是在画布上绘制一个offscreen img元素，那就是GPU加速了。

context.drawImage(myImageElement,0,0);

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

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

1 个答案: