Sujet Précédent Sujet Suivant

Canvas - changer source de l'image au clique

ZauChoco - 10 juin 2018 à 16:19
@karamel Messages postés 1829 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 25 mai 2023 - 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

1 réponse

Réponse 1 / 1
@karamel Messages postés 1829 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 25 mai 2023 146
10 juin 2018 à 23:31
bonjour

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

console.log(this)
0
Rejoignez-nous