HTML5キャンバス "リセット" fillStyle

JavaScriptとHTML5のキャンバスで作業を開始します。HTML5キャンバス "リセット" 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キャンバス "リセット" fillStyle

答えて

関連する問題