HTML5 Canvas のIE8対応

Pocket
LINEで送る

最初ExplorerCanvasを使ってしまって、全然動かなかった。

参考:Internet Explorer 8でCanvasを動かす時のメモ

VMLCanvasを使うとよかったです。
https://code.google.com/p/mofmof-js/wiki/VMLCanvas

VMLCanvas.js は uuCanvas.js から Silverlight と Flash バックエンドを省略し、 コンパクトにパッケージしなおした JavaScript ライブラリです。mofmof.js に依存せず単体でも動作します。 ExplorerCanvas に比べ、より多くの機能をサポートしています。

canvasでグラフを表示してマウスオーバーでポップアップするようなものでしたが、結果的には全てIE10や、chromeなどと同じように表示することができました。

IEだけVML Canvasを読み込みます。

ie8かチェックする関数をつくります。

ie8以外の場合は、$(window).loadを使い、ie8の場合は、window.oncanvasreadyを使います。

これで全部表示されました。スクリプト分けるとメンテが大変なので一つにしようと思って上記のようにしました。images.onloadを使うとie8で動かなかったのでとりあえず外しました。

マウスオーバーチェックは、下記のようになりました。

ie8の場合、e.targetというのが使えないので、その変わりにsrcElementというのを使うのですが、それでやってもrectの値がおかしくて使えませんでした。e.xがmouse_xとほぼ同じになるので、上記のようにしました。

Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です