Canvas - changer source de l'image au clique

- - Dernière réponse : @karamel
Messages postés
1717
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
15 octobre 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 

1 réponse

Messages postés
1717
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
15 octobre 2019
47
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