2012-05-03 3 views
3

これは非常にイライラです。キャンバスの高さと幅を設定しないと、キャンバスはうまく描画されますが、高さと幅を設定すると、黒いボックスが返されます。私はコードを狂った程度に取り除き、問題を見つけることはできません。キャンバスタグは、FFやIE9でうまく機能します。キャンバスタグはクロムに黒いブロックを生成します

var canvas = document.getElementById('can1'); 
var ctx = canvas.getContext('2d'); 

canvas.width = 280; 
canvas.height = 270; 

ctx.clearRect(0, 0, canvas.width, canvas.height); 

これだけでもgoogle chromeのキャンバスが破壊されます。どんなに小さくしても、高さや幅が設定されていれば失敗します。代わりにCSSで高さや幅を設定すると、歪んだ結果が生成されます。

アイデア?

更新:私のキャンバスが十分に小さければ、それはクロームで動作することを発見しました。しかし、私は280x270ではなく100x100のキャンバスが必要です

+0

コードに背景色は適用されません。その例を示すページを提供できますか?私のテストは背景色を示さなかった。あなたが持っているものがすべて帽子なら、あなたの黒い背景のもう一つの理由があります。キャンバスの背景を設定するCSSルールがあり、おそらく気付かなかったと思います。 Chromeデベロッパーツールで確認しましたか? – YMMD

+0

私は持っています。背景色を設定するルールはありません。ここで期待される動作は、何も含まれていない透明な要素になります。私はFFとie9で何を得るのですか? – Fresheyeball

+1

OK、私は背景色(CSSで設定)でjsfiddleを設定しました。http://jsfiddle.net/2dfyw/1/ Chrome 18.0を実行していて、うまく表示されます。 –

答えて

0

可能な解決策!すべてのアニメーションに対して、RequestAnimationFrameを使用します。ちょうど私のプロジェクトの一つに取り組んだ!