0

我有一个像素数组,我想将它绘制到画布上,而不使用 putImageData,因为该函数会忽略剪辑数据。

因此,为了完成这项工作,我将像素数组转换为数据 url,然后将 url 附加到图像上,然后将其绘制到画布上,如下所示:

var ctx = {
    display: document.querySelector('canvas#display').getContext('2d'),
    convert: document.querySelector('canvas#convert').getContext('2d')
}

var image_data = THE_IMAGE_DATA_THAT_I_ALREADY_HAVE;

ctx.convert.putImageData(image_data, 0, 0);

var image_data_URL = ctx.convert.canvas.toDataURL('image/png');
var converter_image = document.querySelector('img#converter-image');

converter_image.onload = function () {
    ctx.display.save();
    ctx.display.beginPath();
    ctx.display.arc(320, 240, 240, 0, Math.PI*2, true);
    ctx.display.clip();
    ctx.display.drawImage(converter_image, 0, 0, 640, 480);
    ctx.display.restore();
}
converter_image.src = image_data_URL;

但是,这会带来非常糟糕的性能,特别是因为我想以 60/秒的速度执行此操作。

应该还有别的办法吧?

4

1 回答 1

2

一种解决方法是在屏幕外画布中使用 getImageData / putImageData 绘制像素,然后将屏幕外画布绘制回画布中。

更多信息:

画布屏幕外

使用 putImagedata 绘制像素(单击代码顶部的空白处以启动它)

于 2012-10-01T15:19:20.077 回答