canvas HTML5 "restablecer" fillStyle

Estoy empezando a aprender a trabajar con JavaScript y el lienzo de HTML5.canvas HTML5 "restablecer" fillStyle

Estoy tratando de dibujar varios elementos con diferentes patrones, pero siempre estoy obteniendo el último patrón configurado. Traté de usar los métodos save() y restore() para almacenar las estadísticas de pila, pero seguramente estoy cometiendo un error en alguna parte, ¿alguien puede ayudarme?

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

Fuente

2011-11-20 canvioso

.save() y .restore() son una forma perfectamente válida para hacer esto. Su problema es un error aync clásico en el que su código .restore() se llama antes de su devolución de llamada. En otras palabras, esto está sucediendo:

context.save() 
context.restore(); 

function(){ 
    context.fillStyle = pattern; 
}

poner context.restore() dentro de su función de devolución de llamada.

Fuente

2011-11-20 20:33:00

por lo que están sugiriendo: context.save(); imageObj.onload = function() {(...) context.restore();}? lo he intentado, pero no funcionó – canvioso

no, él está diciendo 'imageObj.onload = function() {context.save(); ...; context.restore(); } ' – Alnitak

que tampoco funcionó. la última imagen está siendo utilizada siempre como patrón. Código – canvioso

-1

La forma simple en el cuerpo no llama a la función dibujar porque window.onload ya lo llama. Cambia el window.onload para una función y llámalo del cuerpo y listo!

Ejemplo:

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

Fuente

2013-05-08 16:48:19

canvas HTML5 "restablecer" fillStyle

Respuesta

Cuestiones relacionadas