HTML5 canvas "reset"fillStyle

JavaScript 및 HTML5 캔버스로 작업을 시작합니다.HTML5 canvas "reset"fillStyle

여러 패턴으로 여러 요소를 그려야하지만 항상 마지막으로 설정된 패턴을 얻고 있습니다. 스택 정보를 저장하기 위해 save()과 restore() 메쏘드를 사용하려했지만, 확실하게 어딘가에서 실수를하고 있습니다. 아무도 도와 줄 수 있습니까?

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

출처

2011-11-20 canvioso

.save() 및 .restore()이 작업을 수행하려면 완벽하게 유효한 방법입니다. 귀하의 .restore() 코드가 으로 콜백되기 전에 귀하의 콜백이 번 발생하기 때문에 고전적인 동기화 오류가 발생합니다. otherwords에서이 일어나고있다 :

context.save() 
context.restore(); 

function(){ 
    context.fillStyle = pattern; 
}

이 콜백 함수 내에서 context.restore()을 넣어.

출처

2011-11-20 20:33:00

그래서 당신이 제안되어 context.save를();imageObj.onload = function() {(...) context.restore();}? 시도했지만 작동하지 않았습니다. – canvioso

아니요, 그는 'imageObj.onload = function() {context.save(); ...; context.restore(); }' – Alnitak

도 작동하지 않았습니다. 마지막 이미지가 패턴으로 사용됩니다. – canvioso

-1

window.onload이 이미 호출했기 때문에 본문에서 간단한 방법으로 그리기 기능을 호출하지 마십시오. 함수에 대해 window.onload을 변경하고 본문에서 호출하면됩니다.

예 :

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

출처

2013-05-08 16:48:19

HTML5 canvas "reset"fillStyle

답변

관련 문제