Créer manuellement des images en javascript et dessiner par rapport à la couche alpha?

Question

J'essaye actuellement de créer une page avec des images générées dynamiquement, qui ne sont pas des formes, dessinées dans une toile pour créer une animation.

La première chose que j'ai essayé était la suivante:

//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); 

Le problème est que les images se chevauchent et que putImageData simplement ... met les données dans le contexte, sans rapport au canal alpha comme spécifié dans le W3C:

pixels dans la toile sont remplacés en gros, sans composition, le mélange alpha, pas d'ombres, etc.

Donc je pensais, bien comment puis-je utiliser Image s et non ImageData s?

J'ai essayé de trouver un moyen de remettre l'objet ImageData dans une image mais il semble qu'il ne peut être placé que dans un contexte de canevas. Donc, en dernier recours, j'ai essayé d'utiliser la méthode toDataURL() d'une toile 16x8 (la taille de mes images) et de coller le résultat comme src de mes ~ 600 images. Le résultat était beau, mais mangeait jusqu'à 100% de mon processeur ... (ce qui n'a pas été le cas avec putImageData, ~ 5% cpu) Je suppose que pour une raison inconnue, l'image est rechargée à partir du image/png URI de données chaque fois qu'il est dessiné ... mais ce serait tout simplement étrange ... non? Il semble également prendre beaucoup plus de RAM que ma technique précédente. Donc, en conséquence, je n'ai aucune idée de comment atteindre mon objectif.

Comment puis-je créer dynamiquement des images alpha-channelées en javascript, puis les dessiner à une vitesse appréciable sur un canevas? La seule vraie alternative est-elle l'utilisation d'une applet Java?

Merci pour votre temps.

Answer 1

Ne sachant pas, ce que vous voulez vraiment accomplir:

Avez-vous un regard sur le drawImage -method du rendu contexte? Fondamentalement, il fait la composition (comme spécifié par le globalCompositeOperation -property) pour vous - et il vous permet de passer dans un élément de toile en tant que source.

Ainsi pourrait probablement faire quelque chose le long des lignes de:

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 
); 

En supposant que vous avez une animation que vous voulez faire une boucle sur, ce qui a l'avantage de ne devoir générer les images une fois dans une sorte de sprite-carte afin que dans les itérations suivantes, vous ne jamais besoin d'appeler ctx.drawImage() - au détriment d'une empreinte mémoire accrue bien sûr ...

Answer 2

Pourquoi n'utilisez-vous pas SVG?

Si vous devez utiliser canvas, peut-être pourriez-vous implémenter vous-même le dessin d'une image sur une toile?

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

... et ainsi de suite ...

Answer 3

getCSSCanvasContext semble être WebKit seulement, mais vous pouvez aussi créer une toile hors écran comme ceci:

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

Vous pouvez ensuite dessiner et dessiner sur un autre canevas avec la méthode drawImage.