線を引く その２

「線を引く」の回では短い水平線（または垂直線）を階段状に大量に配置して直線を描画しました。
そのため処理速度の遅い IE や FireFox では使い物になりませんでした。

今回は別の方法でやってみます。
結論から先に言うと、遅い IE や FireFox でも 1 フレームあたり 50 本の直線を引くことができました。

要するに要素数を減らすことができれば 1 フレームあたりに表示できる線の数は増えるので、1 直線 1 要素にしてやろうというわけです。具体的には画像を使います。

例えばこの画像は 400px x 25px の左上から右下まで線を引いて線の部分以外を透過にしたものです。

これを表示するときに width や height を変更すると別の長さ別の角度の線になります。

↑ width を 300px 、height を 10px にしてみました。

こんな風に画像のサイズを変えていろんな線を引いてやろうというわけですが、もちろん１つの画像だけではいろんな長さや角度の線は表現できませんし、上の例のようにサイズ変えると色が薄くなったり線が途切れてしまったりします。なのでいろんなパターンの画像を用意しておく必要があります。
（ IE は途切れずにきれいにレンダリングします。初めて IE すごいやん、と思いましたｗ）

さらにこの方法の欠点は画像なので線の色が変えられないということです。
色の違う線を引くためには色毎に画像を用意しなければなりませんｗ

やってみたのが　これ　。

↑
このブログでは何故か gif が透過しないので、今回はサンプルは外出しです。すんませ。

画像の先読みをやってないので、しばらくは変な表示になったりしますが、時間が経つと（画像が全部読み込まれると）治ります。
また十分な画像パターンを用意していないので色が薄くなったり点線になったりします。気にしないでください^^;