我有一个像素数组,我想将它绘制到画布上,而不使用 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/秒的速度执行此操作。
应该还有别的办法吧?