HTML5 canvas "reset" fillStyle

Sto iniziando a imparare a lavorare su JavaScript e su tela HTML5.HTML5 canvas "reset" fillStyle

Sto provando a disegnare diversi elementi con modelli diversi, ma sto ottenendo sempre l'ultimo modello impostato. Ho provato ad usare i metodi save() e restore() per memorizzare le statistiche di stack, ma sicuramente sto facendo un errore da qualche parte, qualcuno può aiutarmi?

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(); 
}

fonte

2011-11-20 canvioso

.save() e .restore() sono un modo perfettamente valido per fare questo. Il tuo problema è un classico errore di sincronizzazione in cui il tuo codice .restore() viene chiamato prima del il tuo callback. In altri termini, questo sta accadendo:

context.save() 
context.restore(); 

function(){ 
    context.fillStyle = pattern; 
}

messo context.restore()all'interno vostra funzione di callback.

fonte

2011-11-20 20:33:00

in modo che lei suggerisce: context.save(); imageObj.onload = function() {(...) context.restore();}? ho provato, ma non ha funzionato – canvioso

no, sta dicendo 'imageObj.onload = function() {context.save(); ...; context.restore(); } – Alnitak

che non ha funzionato troppo. l'ultima immagine viene utilizzata sempre come modello. – canvioso

-1

Il modo semplice nel corpo non chiama funzione di disegno perché window.onload già lo chiama. Cambia il window.onload per una funzione e chiamalo dal corpo e il gioco è fatto!

Esempio:

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();">

fonte

2013-05-08 16:48:19

HTML5 canvas "reset" fillStyle

risposta

Problemi correlati