У меня есть массив пикселей, и я хотел бы нарисовать его на холсте без использования 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/сек.
Должен быть другой путь, верно?
