IEでCanvas - うなの日記

ExplorerCanvasを使うとIEでCanvasを使えるようになります。(via PHPSPOT開発日誌-IEでJavaScriptのCanvasを利用するためのライブラリ「ExplorerCanvas」)

excanvas.jsをダウンロードしてインポートするだけでOK。
注: Canvasはページのロード完了後に呼び出す必要があるようです。
- 昨日のサンプルにそのままインポートしただけでは動作せず、サンプルにあわせて呼び出し順を修正すると動くようになりました。原因はよくわかりません。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="excanvas.js"></script>
  <script type="text/javascript">
  // ページ読み込み完了後に実行する。
  function onLoad () {
    // キャンバス要素からコンテキストを取得。
    var canvas = document.getElementById('ca'); // キャンバス要素
    var ctx = canvas.getContext('2d'); // 引数を'2d'として、2次元描画用のコンテキストを得る。

    // ●を描く。
    ctx.fillStyle = "#FF0000";                // 塗りの色を赤に設定。
    ctx.beginPath();                          // パスの描画を開始
    ctx.arc( 150, 100, 50, 0, Math.PI*2, 1 ); // ○を描く
    ctx.fill();                               // 書いたパスを塗りつぶす
  }
  </script>
</head>
<body onload="onLoad()">
  <!-- キャンバス要素を作る。 -->
  <canvas id="ca" width="300" height="200" style="border:1px solid #999999;background-color:#FFFFFF;"></canvas>
</body>
</html>

確認はこちら。

内部的にはVMLを使って描画を行っているようです。へー。