2011-06-03 21 views
0

私は、キャンバス要素を使用して、MySQLクエリから取得した値に従って色付けされ、JavaScript配列に書き込まれたパッチを持つ地図を表示しました。私の2台のコンピュータ、Firefox 4、IE 9、Safariで正常に動作します。しかし、私が学校でデモをしたとき、IE 8(おそらくそれが問題になるだろう)とFirefox 3.6(うまくいくだろう)の両方で、キャンバスは見えませんでした。私はそれも無効にすることができる方法を参照してくださいすることはできません!学校のITスタッフは何をしていますか?代わりにテストして、代わりに通常のイメージマップを描くことはできますか?キャンバス要素が無効になっているようです

答えて

1

IE8はキャンバスをサポートしていません。 excanvasを使用してエミュレートすることができます。

第2に、ブラウザは、キャンバスの幅と高さを任意の値に設定する義務がありません。 widthheightの属性を設定してみてください。

UPD:あなたのページの断片を提供するといいでしょう。これを行う前に、問題を絞り込む方法に関するいくつかのアイデア。

  • ページのdoctypeが<!doctype html>に設定されていることを確認してください。

  • canvasが(<canvas></canvas>の間に置く、すなわちテキスト)をサポートしていないことについて何もメッセージが(それは、Firefox 3.6で起こるが、それでもべきではありません)が表示されていないことを確認してください。

  • キャンバス要素にはstyle='border:solid;'を設定します。ボーダーが予想される位置に描画されているかどうかを確認します

  • canvasdivに入力し、期待される位置に表示されていることを確認してください(例:style='border:solid;')。キャンバスおよび/またはラッピング要素の境界線が表示されますが、何の描画がありますされていない場合は

は、その後、コードを引くと、若干の誤差があります。そうでない場合は、要素の配置に問題があります(たとえば、CSSがワイルドになったなど)。

UPD:Firebugを有効にしてサイトを実行しましたが、drawImageコールで例外が表示されました。

img.src = 'images/snap9.jpg'; 
ctx.drawImage(img,0,0); // HERE! 

ただし、ブラウザセッションで最初に読み込まれたページのみです。

イメージアドレスにsrcを設定すると、すぐに読み込まれず、それまでは描画できないことが(おそらく)考えられます。したがって、例外がスローされ、残りのコードは実行されません。

イメージ用にonloadハンドラを設定してください(を参照)。このハンドラでは、残りの図を実行する必要があります。

助けてくれたら教えてください。

+0

返信いただきありがとうございます。私はIEに興味がありません - 私のユーザーはFirefoxを使用しており、キャンバスもそこでは動作しません。私は要素を作成するhtmlの幅と高さを設定します(javascriptではありません)。 –

+0

ありがとうございますelder_george。私はキャンバスの中にテキストを置き、それは表示されません。私は大学のITセキュリティからの返信を受け取りました。彼はHTML 5を無効にするために何もしないと言います。サイトは: –

+0

サイトリンクは表示されません。もう一度入れてみてください。 –

関連する問題