Создавать вручную изображения в javascript и рисовать относительно альфа-канала?

Question

В настоящее время я пытаюсь создать страницу с динамически генерируемыми изображениями, которые не являются фигурами, нарисованными на холсте для создания анимации.

Первое, что я попробовал, было следующее:

//create plenty of those:
var imageArray = ctx.createImageData(0,0,16,8);
//fill them with RGBA values...
//then draw them
ctx.putImageData(imageArray,x,y);

Проблема в том, что изображения перекрываются и что putImageData просто ... помещает данные в контекст, без учета альфа-канала, как указано в w3c:

пикселей на холсте заменяются оптом, без композиции, альфа-смешения, без теней и т. Д.

Итак, я подумал, ну как я могу использовать Image с, а не ImageData с?

Я пытался найти способ на самом деле поместить объект ImageData обратно в изображение, но, похоже, его можно поместить только в контекст холста. Итак, в крайнем случае, я попытался использовать toDataURL() метод холста 16x8 (размер моих изображений) и прикрепить результат как src моих ~ 600 изображений.

Результат был прекрасным, но он потреблял 100% моего процессора ... (чего не было с putImageData, ~ 5% процессора). Я предполагаю, что по неизвестной причине изображение перезагружается * URI данных image/png каждый раз, когда он рисуется ... но это было бы странно ... нет? Похоже, что он занимает гораздо больше оперативной памяти, чем моя предыдущая техника.

Итак, в результате я понятия не имею, как достичь своей цели.

Как я могу динамически создавать альфа-каналы изображений в javascript и затем рисовать их с заметной скоростью на холсте?

Является ли единственной реальной альтернативой использование Java-апплета?

Спасибо за ваше время.

Answer 1

Не зная, чего вы действительно хотите достичь:

Вы смотрели на drawImage -метод рендеринга-контекста?По сути, он выполняет композицию (как определено globalCompositeOperation -property) для вас - и позволяет передавать элемент canvas в качестве источника.

Так что, вероятно, можно сделать что-то вроде:

var offScreenContext = document.getCSSCanvasContext( "2d", "synthImage", width, height);
var pixelBuffer = offScreenContext.createImageData( tileWidth, tileHeight );
// do your image synthesis and put the updated buffer back into the context:
offScreenContext.putImageData( pixelBuffer, 0, 0, tileOriginX, tileOriginY, tileWidth, tileHeight );
// assuming 'ctx' is the context of the canvas that actually gets drawn on screen
ctx.drawImage(
  offScreenContext.canvas,                          // => the synthesized image
  tileOriginX, tileOriginY, tileWidth, tileHeight,  // => frame of offScreenContext that get's drawn
  originX, originY, tileWidth, tileHeight           // => frame of ctx to draw in
);

Предполагая, что у вас есть анимация, которую вы хотите зациклить, это дает дополнительное преимущество, заключающееся в том, что вам нужно только сгенерировать кадры один раз в какую-то карту спрайтов, чтобы на последующих итерациях вынужно только позвонить ctx.drawImage() - за счет увеличенного объема памяти конечно ...

Answer 2

getCSSCanvasContext представляется только WebKit, но вы также можете создать закадровый холст, например:

var canvas = document.createElement('canvas')
canvas.setAttribute('width',300);//use whatever you like for width and height
canvas.setAttribute('height',200);

Который затем можно нарисовать и нарисовать на другом холсте с помощью метода drawImage.

Answer 3

Почему вы не используете SVG?

Если вам нужно использовать холст, возможно, вы могли бы реализовать рисование изображения на холсте самостоятельно

var red = oldred*(1-alpha)+imagered*alpha

... и так далее ...