HTML5 canvas "reset" fillStyle

Je commence à apprendre à travailler avec JavaScript et le canvas HTML5.HTML5 canvas "reset" fillStyle

J'essaie de dessiner plusieurs éléments avec des motifs différents, mais je reçois toujours le dernier motif défini. J'ai essayé d'utiliser les méthodes save() et restore() pour stocker des stats de pile mais sûrement je fais une erreur quelque part, quelqu'un peut-il m'aider?

window.onload = function(){ 
    draw(100, 100, "http://www.itexto.net/devkico/wp-content/uploads/2011/03/stackoverflow-logo-250.png"); 
    draw(0, 0, "http://googlediscovery.com/wp-content/uploads/google-home.png");    

}; 

function draw(x, y, src) { 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 

    context.save(); 

    var imageObj = new Image(); 
    imageObj.onload = function(){ 
     var pattern = context.createPattern(imageObj, "repeat"); 

     context.rect(x, y, 100, 100); 

     context.fillStyle = pattern; 
     context.fill(); 
    }; 
    imageObj.src = src; 
    context.restore(); 
}

Source

2011-11-20 canvioso

.save() et .restore() sont un moyen de faire parfaitement valide cela. Votre problème est une erreur aync classique en ce que votre code .restore() est appelé avant votre rappel. En d'autres termes, ce qui se passe:

context.save() 
context.restore(); 

function(){ 
    context.fillStyle = pattern; 
}

mis context.restore()l'intérieur votre fonction de rappel.

Source

2011-11-20 20:33:00

donc vous suggérez: context.save(); imageObj.onload = function() {(...) context.restore();}? J'ai essayé, mais je n'ai pas travaillé – canvioso

non, il dit 'imageObj.onload = function() {context.save(); ...; context.restore(); } ' – Alnitak

qui n'a pas fonctionné aussi. La dernière image est utilisée comme motif. – canvioso

-1

La manière simple dans le corps n'appelle pas la fonction de dessin car window.onload l'appelle déjà. Changez le window.onload pour une fonction et appelez-le du corps et c'est tout!

Exemple:

var joda = function() 
{ 
    draw(100, 100, "http://www.itexto.net/devkico/wp-content/uploads/2011/03/stackoverflow-logo -250.png"); 
    draw(0, 0, "http://googlediscovery.com/wp-content/uploads/google-home.png"); 
}; 

<body onload="joda();">

Source

2013-05-08 16:48:19

HTML5 canvas "reset" fillStyle

Répondre

Questions connexes