avec html5 clair

Question

i ont ce code

function clear(){ 
    context2D.clearRect(0, 0, canvas.width, canvas.height); 
} 


function desenhaBonecoDir(){ 

    clear(); 
    context2D.setTransform(1, 0.30, 1, -0.30, 10, 380);//problem here 
    context2D.drawImage(bonecoRight, x, y); 
    x += -10 * xDirection; 
} 

si je supprime la ligne où je commente "problème ici", le script fonctionne bien, mais si je change la perspective avec l'ensemble transformer je ne sais pas pourquoi, l'image est copiée mais non effacée, le résultat est une image répétée lorsque j'appuie sur les touches

Une aide?

grâce

Answer 1

Le problème est causé de changer la perspective, mais pas le changer quand vous l'effacer, il efface la « perspective » et non pas toute la toile, essayez ci-dessous. Ce qu'il fait est d'enregistrer la perspective actuelle, vous la changez ensuite pour tout ce dont vous avez besoin, dessinez, etc., puis la restauration restaure la perspective précédente afin que vous récupériez vos coords normaux.

context2D.save(); 
context2D.setTransform(1, 0.30, 1, -0.30, 10, 380); 
context2D.drawImage(bonecoRight, x, y); 
context2D.restore(); 

Modifié votre code juste un peu pour le montrer fonctionner. http://jsfiddle.net/89yjG/1/

Commentez, sauvegardez et restaurez les artefacts.