【Internet Explorer 8】で【canvas】 を使う方法

こんにちは。いたかなやです。

今日も来て頂いてありがとうございます。

みなさんは普段、どのブラウザを使っていますか？
ちなみに僕は Safari を使っています。

Safariのここが良いから！というのは無いのですが、
（safariファンのみなさんすみません）
最初からMacに入っていたので使っています。

僕のように、最初から入っているブラウザを使うという点では、
Windowsを使っている人は、Internet Explorer ( IE ) でしょうか。

でも、この IE が問題児なんです。
特に、IE8 以前が！！（IEファンのみなさんもすみません）

特に特に、canvasタグを使う場合はです！

ということで、
今日は、ブラウザの違いの判定方法と、
IE8 以前でcanvasタグを使う方法を書き留めておきたいと思います。

■ブラウザの違いを判定する

まずはブラウザの違いからです。

var userAgent = window.navigator.userAgent.toLowerCase();

if (userAgent.indexOf('opera') != -1) {
     return 'Opera';
} else if (userAgent.indexOf('msie') != -1) {
     return 'IE';
} else if (userAgent.indexOf('chrome') != -1) {
     return 'Chrome';
} else if (userAgent.indexOf('safari') != -1) {
     return 'Safari';
} else {
     return false;
}

戻り値によって、処理を分岐する事ができそうですね。

次にIEのバージョンの違いを判定します。

var appVersion=window.navigator.appVersion.toLowerCase();

if (appVersion.indexOf("msie 6.") != -1) {
    return 'IE6';
} else if (appVersion.indexOf("msie 7.") != -1) {
    return 'IE7';
} else if (appVersion.indexOf("msie 8.") != -1) {
    return 'IE8';
} else if (appVersion.indexOf("msie 9.") != -1) {
    return 'IE9';
} else {
    return 'IE?';
}

上のブラウザ判定と組み合わせて使うと、だいたいは対応できそうです。

また、ブラウザの違いにより、読み込むjsファイルも分岐させる事ができます。
これ意向のコードは、htmlのhead部分に記述します。

・IEの場合のみ読み込む

<!--[if IE]>
   <script type="text/javascript" src="*****.js"></script>
<![endif]-->

・IEのバージョンが８未満の場合のみ読み込む

<!--[if lt IE 8]>
   <script type="text/javascript" src="*****.js"></script>
<![endif]-->

・IEのバージョンが８以下の場合のみ読み込む

<!--[if lte IE 8]>
   <script type="text/javascript" src="*****.js"></script>
<![endif]-->

・IEのバージョンが６より新しいの場合のみ読み込む

<!--[if gt IE 6]>
   <script type="text/javascript" src="*****.js"></script>
<![endif]-->

・IEのバージョンが６以上の場合のみ読み込む

<!--[if gte IE 6]>
   <script type="text/javascript" src="*****.js"></script>
<![endif]-->

・IE以外の場合のみ読み込む

<!--[if ! IE]>-->
  <script type="text/javascript" src="*****.js"></script>
<!--<![endif]-->

読み込むファイルを分岐することによって、
IEの場合は安心して、IEのコードが書けるので良いかもしれませんね。

■IE8 以前でcanvasタグを使う

IEで無い場合は次のように使用します。

document.write('<canvas id="canvas" width="300" height="200" style="background-color:gray;"></canvas>');
var canvas = document.getElementById('canvas');
//---1---
var context = canvas.getContext('2d');
   context.strokeStyle = 'black';
   context.lineWidth = 15;
   context.beginPath();
   context.moveTo(100,100);
   context.lineTo(200,100);
   context.arc(150, 100, 52, 0, Math.PI*0.3, true);
   context.stroke();

しかし、このコードはIEでは動きません！
IEでも他のブラウザと同じように動かすためには、
次の３つの事を行う必要があります。

① excanvas.jsをダウンロードする。
まずは、こちらから
「excanvas_r3.zip」というファイルをダウンロードしてください。
その中に、「excanvas.js」というファイルがあると思うので、
そちらを、index.htmlと同じフォルダ内に配置してください。

② excanvas.jsを読み込む。
index.html の head 部分に次のコードを追加します。

<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

先ほど、ダウンロードした「excanvas.js」をブラウザがIEの時に限って読み込んでいます。

③ canvasを初期化する。
最後に最初のコードで《//---1---》となっている部分に、次のコードを挿入します。

canvas = G_vmlCanvasManager.initElement(canvas);

意味は良くわかりませんが、初期化しているみたいです。
これが無いとgetContextが行えません。

以上で、IEでの表示は問題なく行えるようになりました。
しかし、③番目のコードを追加する事によって、IE以外のブラウザでは、
逆に表示ができなくなってしまいました。

やはり最初に示したようにブラウザごとに処理を分岐する必要がありそうです。
そういう意味では、《//---1---》となっている部分に追加するのは、

var userAgent = window.navigator.userAgent.toLowerCase();
if(userAgent.indexOf('msie') != -1)canvas = G_vmlCanvasManager.initElement(canvas);

の方が良いかもしれませんね。

IE8以前が完全に消えるまで、
この記事が誰かの参考になれが幸いです。

Opera Mobile Web Browser

Dolphin Browser

Sleipnir Mobile - Web Browser

HTML5 Canvas

ゲームプログラミングのための HTML5 CANVAS入門

HTML 5 for Beginners