2012-04-02 9 views
0

私はmacを使用しており、クロムを18.0.1025.142に更新しています。 今私は奇妙な問題があります。ほとんどの場合(必ずしも奇妙ではない)、メソッドcontext.createPattern()は機能せず、ビットマップ塗りつぶしの代わりに黒色で塗りつぶします。キャンバス、クロムのcreatePatternバグ18

答えて

0

Google ChromeとOperaでよく発生する問題です。この場合、キャンバスのすべてのスクリプトを含む関数を作成し、この関数でイメージパターンを作成する必要があります。次に、window.onloadイベントまたは任意のイベントで関数を呼び出す必要がある場合、画像creatPattern()がうまく動作すると思います。例に沿って理解してみてください。

<!DOCTYPE html> 
<html> 
<body> 

<p>Image to use:</p> 
<img src="img_lamp.jpg" id="lamp" width="32" height="32"> 
<p>Canvas:</p> 



<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<script> 

window.onload = draw; 

function draw() { 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.clearRect(0, 0, c.width, c.height); 
var img = document.getElementById("lamp") 
var pat = ctx.createPattern(img, "repeat"); 
ctx.rect(0, 0, 150, 100); 
ctx.fillStyle = pat; 
ctx.fill(); 
} 

</script> 

</body> 
</html> 

ここにあなた自身のjpgまたはpngを使用してください...お楽しみください!

関連する問題