JavaScriptコミュのIE + excanvas.js での描画速度について

はじめまして、KAZと申します。
今CANVASとJavascriptを利用して時間の入力インターフェースを作成しています。
Firefox、Opera の場合は問題ないのですが、IE + excanvas.js の場合にやたらと描画が遅くて、色々試しているうちに時々描画が早くなるときがあるのに気づき調べてみました。
すると、描画前にのデバッグ用のspan要素にデバッグコードを出力しているところだけ描画が早くなってました。
今は描画用のメソッドの先頭で
var nspan = getElementById('dummy');
nspan.innerHTML='';
というようなダミーコードを入れています。
今のところそれなりの速度で動いているのですが、原因がわからないだけにすっきりしません。

どなたかなぜこういう現象が起こるのかご存知の方いらっしゃいませんか？

コメント(5)

最初
全て
最新の40件

[1] mixiユーザー 02月11日 18:14

すいません、張り忘れです。
こちらに動作確認ページがあります。
IPモロ出しなのでちょっとあれですが・・・。

ttp://125.131.92.146/test/test9_lib.htm

[2] mixiユーザー 02月11日 18:51

あ～、こういうUIはおもしろいですね～
これからVectorGraphicは結構流行る感じしますよね。

それはともかく描画速度ですが、
なんて言えば良いのかな…？あまり処理速度のことは詳しくないから
ど素人な表現しかできないのですがｗ、
window.onresize などを実装したときにも似たような現象になることがありますよね。
描画は厳密にリアルタイムに行うわけではなく、
「適当なタイミング」をブラウザが見つけて、その時に描画するようなので
実行速度を下げたときに体感速度が上がることは時々あるみたいです。

今回のようにダミーコードを入れるのは、実際にはあまり得策ではないので、
timerを使ってJavaでいうThreadっぽい処理をさせるのが一般的かも知れないです。
（ただ、今回のケースだと、それはやりづらいかな…？）

excanvas.js は、まだまだ使いづらい感じがあって、
IEの場合は直接VML（状況によってはTIMEも）で描画するのが
一番速い描画速度を出せる感じがします。
もしかしたら、IE以外もライブラリを使わずに直接SVGで描画する方が早いかも知れないですね。
VMLとSVGに関して、もし必要な情報があればまた後でレス入れますね。

[3] mixiユーザー 02月11日 21:29

だぃ様、早速のレスありがとうございます。

> 描画は厳密にリアルタイムに行うわけではなく～
そうですね～、IEで非対応のタグを無理やり使っているので、<canvas></canvas>内に描画(タグの追加)を行ってもレンダーが「更新された」と判断できないのかも知れませんね。

> timerを使ってJavaでいうThreadっぽい処理～
操作(入力)と描画を別けるという意味ではいいかもしれませんね。
onmousedown でsetTimeoutしてonmouseupでclerTimeout、onmousemove時は座標の取得だけ行って、コールバック関数で描画とかすれば出来るのかな？
でも、最初に書いたような理由で再描画がされないなら意味無いのかな・・・。
今度試してみます。

VMLとSVGに関してはまだ知識不足なので調べてみます。

[4] mixiユーザー 02月11日 22:09

おそらくexcanvas.jsの内部では、canvasタグって概念は全くなくて
VMLへのアダプターのような役割をしてるだけだと思うので、
汎用的に扱ってる分、単純に処理に時間が掛かってるだけだと思います。
VMLで直接書けば、あとは角度に関するrotateっていうスタイルを操作するだけなので
描画速度もそこそこアップするだろうってことです。
excanvas.jsを使った場合は、たぶんelementの生成を繰り返してるんじゃないでしょうか？
動かしてみた限り、mousemoveの度に生成されてる雰囲気ですけども…。

で、確かに、よくよく考えると、やっぱりthread的な処理は
今回はちょっと無理があるかも知れないですねｗ
混乱させちゃったらすみませんです。

今回の場合、（現状の実装をどうしてるかは見てませんが、）
mousemoveの最中は描画だけに専念させて、
mouseupで時間計算などの最終処理を行えば多少軽くなりそうですが、
先述の「elementの生成」の方が大きいかな…？

VMLとSVGに関しては、サンプルをお見せした方が早いかな？？
http://simarisu.sn42.com/samples/biorhythm.html
以前「バイオリズム云々」ってスレがあったんだけど、
スレ主さんが批判を受けたからか、スレ丸ごと消えちゃってｗ
その時のサンプルですが、興味があれば見てみて下さいね。

[5] mixiユーザー 02月11日 22:58

仰る通り、excanvas.js でCANVASに描画を行うと描画のたびにinsertAdjacentHTMLでジャカジャカElementを生成していっています。IEのDOM Inspectorで見る限りでは<shape>というタグが増えていきますが、中身はVMLの<v:shape>や<v:group>のようです。
CANVAS用のMethodにclearRect()というのがあるのですが、本来は指定した領域のα値をゼロクリアするというもの(らしい)なのですが、excanvas.jsの場合はclearRect()が呼び出されたら無条件でCANVASタグのinnerHTMLに空文字("")を代入しています。

できればIEもFirefoxも出来るだけ共通のコードでライブラリ化したかった(楽をしたかった)ので無理矢理excanvas.jsを使っていたのですが、IEの場合はVMLによる実装を行うようにした方がいいのかも知れませんね。
VMLであれば、時針や秒針のシェイプ毎にrotateなどのメソッドで回転が出来る、ということですよね？
最初に目指していたイメージは正にそれなので、提示していただいたサンプルを参考にしてVMLを勉強してみます。

ちなみに現在の大まかな実装としてはonmousedownでボタン種と位置の判定を行い、onmousemoveでは座標や角度の計算を描画、リアルタイム更新時は時間の計算とバインドされているエレメントの更新、onmouseupで時間の計算と時刻の更新という感じにしています。
リアルタイム更新とか色々機能付けすぎて肥大化している感もありますので、これを気に機能の見直しもしてみようと思います。
時間指定するだけでprototype.jsと大して変わらないサイズのファイルを読み込まないといけない、ってのもなんだかアレですしね・・・。

ログインすると、みんなのコメントがもっと見れるよ