Canvas - changer source de l'image au clique

- - Dernière réponse : @karamel
Messages postés
1665
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
4 janvier 2019
- 10 juin 2018 à 23:31
Bonjour,

Je cherche à changer la source d'une image affiché dans un canvas au clique, mais je n'y arrive pas:

var c = document.getElementById("rendu");
var ctx = c.getContext("2d");

var skin = new Image();
skin.onload = draw;
skin.src = "../assets/sprites/character/skin/"+document.getElementById('sex').getAttribute('value')+"/skin/"+document.getElementById('skin').getAttribute('value')+".png";


var button = document.getElementById("button");

button.addEventListener("click", function() {
skin.src = "../assets/sprites/character/skin/female/skin/"+document.getElementById('skin').getAttribute('value')+".png";
skin.onload = draw;
});


function draw(){
ctx.drawImage(this, 0,128,64,64,0,0,64,64);
ctx.drawImage(this, 0,0,64,64,64,0,64,64);
ctx.drawImage(this, 0,64,64,64,128,0,64,64);
ctx.drawImage(this, 0,192,64,64,192,0,64,64);

}


Mais avec ce code ça ne fonctionne pas, comment faire ?

Merci
Afficher la suite 

Votre réponse

1 réponse

Messages postés
1665
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
4 janvier 2019
34
0
Merci
bonjour

met un console.log dans la fonction draw afin de voir ce que renvoi this

console.log(this)

Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.