Bonjour à tous,

Je suis à la recherche d'une piste pour avancer dans un de mes projets.
J'utilise du Javascript/ jQuery et suis tombé dans l'utilisation des Canvas... Je m'y perd un peu.

Voila mon souci.

j'ai crée une fonction qui remplace le contenu d'un canvas image par une autre image.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function loadPicture(src,cible)
{
 
	var canvas = $('#image'+cible)[0]; // je cible mon canvas
	canvas.width = canvas.width;// pour vider le canvas
 
        var c = canvas.getContext("2d");
	var img = new Image(); // je crée mon image vide
	img.src = src;
 
	img.onload = function(){
		c.drawImage(img, 0, 0,200,200); // je charge la source de la nouvelle image.
	}
}
Je cherche à faire un fade entre l'ancienne image et la nouvelle.

La problématique est que cette fonction est lancée toutes les 3 secondes pour atteindre une nouvelle cible.

Malgré mes recherches... pas moyen de faire ce fondu.
Avez vous des pistes ?

Merci d'avance
----
Romain, l'homme qui a découvert l'existence des canvas ce matin !