<canvas>機能を使用して "gif"画像の上に線を描くことはできますか？

Question

アップロードされた「map.gif」画像の上に線を引くのが難しいです。

基本的に私は小さいアウトラインマップをアップロードし、 "エリア"機能を使用して定義されたエリア（都市、道路など）を作成しました。私が都市をクリックするとsnallのポップアップが "やあ、ダラスをクリックしただけで"という単語で表示されます。すべてうまく動作します。

私の問題は、私の地図は実際には実際の都市や道路が描かれていない空白の輪郭にすぎないということです。

したがって、都市（円）と道路（線）を描画するために「キャンバス」関数を使用しようとしました。

唯一の問題は、マップの上に表示されるのではなくマップの下に表示されることです。

どのように私はマップ上に表示される行を得ることができますか？

多くのおかげで、

ピート

Answer 1

あなただけの画像やキャンバスのCSSのZ-インデックス値で遊んでみてくださいする必要がある場合があります。 キャンバスを透明に設定してください。

画像をキャンバスに置き換える（またはキャンバス内で画像を読み込む）こともできます。 キャンバスで画像を使用する方法に関するヒントについては、hereをご覧ください。

Answer 2

私はgifをキャンバスメモリに直接ロードし、残りのすべてをキャンバス内部で実行します。

gifはアニメーション化されていません。

読み込みに関する参考資料：https://developer.mozilla.org/en/Canvas_tutorial/Using_images