Fondu entre deux canvas images
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:
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 ! :roll:
