HTML5 canvas「重置」fillStyle

我開始學習使用JavaScript和HTML5的畫布。HTML5 canvas「重置」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()代碼被稱爲之前。。換句話說，這種情況正在發生：

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「重置」fillStyle

回答

相關問題