将一个数组缓冲区绘制到画布上的最佳方法是什么?

时间:2014-03-02 22:50:38

标签: javascript html5 canvas asm.js

我有ArrayBuffer,我有一个名为module.repaint的函数,它与ArrayBuffer一起使用。在每次重绘调用中,我都希望将ArrayBuffer中的颜色放到画布上。

我这样做:

imgData.data.set(new Uint8ClampedArray(MEM, 0, siz));

但是有可能将ArrayBuffer的一部分更快地复制到另一个吗? 代码:

var MEM = new ArrayBuffer(2*1024*1024);
var canvas, ctx, imgData, siz;

var repaint = function() {
    // module.repaint works on the arraybuffer
    module.repaint();

    imgData.data.set(new Uint8ClampedArray(MEM, 0, siz));
    ctx.putImageData(imgData, 0, 0);

    requestAnimationFrame(repaint);
};

var init = function() {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    siz = canvas.width*canvas.height*4;

    imgData=ctx.createImageData(canvas.width,canvas.height);

    repaint();
};

2 个答案:

答案 0 :(得分:2)

如果可能,请重构module.repaint()以使用屏幕外画布而不是像素数组。

通过这种方式,您可以将屏幕外画布绘制到屏幕画布上,因为GPU可以进行blitting而不是增加CPU负担。

putImageData速度较慢,因为它涉及CPU从像素阵列中获取数据,在temp数组中设置该数据并将temp数组传输到屏幕上的imageData。这些都是负担CPU并降低性能的活动。

答案 1 :(得分:2)

请注意,我没有检查增益是否重要,但我可以在这里看到一些有用的优化。

首先,Uint8ClampedArray是缓冲区的视图,而不是缓冲区本身,因此您不需要每次都创建它。 (您还可以在单​​个缓冲区上拥有多个视图)

您还应该避免使用set的{​​{1}}方法,因为它会将所有数据从一个数组复制到另一个数组(这是无用的)。相反,您可以在构造函数上设置imgData.data

使用该代码,Uint8ClampedArray上的每次更改都会自动影响MEM,因为imgData会直接指向imgData.data

MEM