2017-08-22 14 views
0

の既存のデータURIに塗りつぶしスタイル(テクスチャ)を設定するにはどうしたら持っている既存のPNGデータURIのように:私は私のキャンバスでテクスチャとして、私がやっていることことを利用したいキャンバス

let dataURI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAD+qAB849H0AAAAAXRSTlMAQObYZgAAAAxJREFUCNdjSEsgiACnWAlJEDYe/gAAAABJRU5ErkJggg=="; 

いくつかの操作を引き出す。私はcanvas.fillStyleでいくつか試しましたが、私はそれが動作しているのを見ていません。色はうまくいきます。

描画操作でtextureとしてdataURIを使用する方法はありますか?

+0

は、あなたが何を意味するか:私のようにそれを使用したいですテクスチャ? –

+0

私は塗りつぶしのスタイルを意味するので、繰り返します。 – BBaysinger

答えて

1

あなたはとても基本的にパターンとして画像を設定するには、(非同期の側面を扱うようにしてください)最初のイメージとしてそれをロードする必要があります。

var img = new Image; 
img.onload = imageIsReady; 
img.src = "data: ....."; // full uri here 

function imageIsReady() { 
    var pattern = ctx.createPattern(img, "repeat"); 
    ctx.fillStyle = pattern; 
    // fill, etc. 
} 
+0

それで、そこにその描画関数と同期していますか?私はパターンを設定する前にいくつかのイベントを待つ必要がありますか? – BBaysinger

+0

@BBaysingerでは、例のようにonloadを使用して画像をロードする(非同期に)のを待つだけで済みます(最後の例ではdrawImageをパターンに置き換えてください)。その後、それを参照して同期(リニア)な方法で描画することができます。 – K3N

+0

@BBaysingerはより分かりやすい回答を更新しました。 – K3N