ブログ内検索

by Futomi Hatano

新規に生成したcanvas要素に対してExplorerCanvasを使う方法

Canvasは、Firefox, Opera, Safari には実装されていますが、Internet Explorer には実装されていません。そのため、IE 用に ExplorerCanvas を使う方法がよく用いられます。

ところが、JavaScript から、createElement メソッドを使って canvas 要素を新たに生成した場合、そのままでは、ExplorerCanvas は新規の canvas 要素をハンドリングすることができません。ExplorerCanvas は、ページがロードされたときに、ドキュメント内に存在する canvas 要素をイニシャライズしているからです。ドキュメントがロードされた後に、JavaScript を使って追加された canvas 要素の場合は、イニシャライズされていないため、Canvas の機能が使えないわけです。

しかし、ExplorerCanvas は、このようなシーンを想定して、明示的にイニシャライズするメソッドを提供しています。

たとえば、次の div 要素の中に canvas 要素を新たに生成して、図形を描いてみましょう。

HTML
<div id="figure"></div>
JavaScript
<!--[if IE]><script type="text/javascript" src="excanvas.js" mce_src="excanvas.js"></script><![endif]-->
<script type="text/javascript">
window.onload = function() {
  // canvas要素を新規に生成
  var canvas = document.createElement("canvas");
  // 新規に生成したcanvas要素をドキュメントに追加
  document.getElementById("figure").appendChild(canvas);
  // 新規に生成したcanvas要素をイニシャライズ(IEのみ)
  if(document.uniqueID) {
    canvas = G_vmlCanvasManager.initElement(canvas);
  }
  // 新規に生成したcanvas要素に図形を描画
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillStyle = 'rgb(192, 80, 77)';
  ctx.arc(70, 45, 35, 0, Math.PI*2, false);
  ctx.fill();
};
</script>

ExplorerCanvas(excanvas.js)は、G_vmlCanvasManager.initElement() メソッドを提供しています。このメソッドは、引数に canvas 要素の要素ノードオブジェクトを与えると、イニシャライズされたcanvas 要素ノードオブジェクトが返されます。以降、そのオブジェクトを通して、Canvas の機能を使っていきます。

excanvas.js は IE の場合にのみロードされるようになっていますので、このメソッドを使う場合には、事前に IE かどうかをチェックしなければいけません。ここでは、IE が独自に持っている document.uniqueID プロパティを if の条件式で使っていますが、IE かどうかが区別できればよいので、UserAgent の文字列を評価する方法でもよいでしょう。

また、このメソッドは、ページにすでに追加された要素にしか適用できません。つまり、appendChild メソッドで canvas 要素を追加した後に、このメソッドを使うようにしてください。

この投稿は 2007年11月21日 水曜日 11:29 AM に Canvas, ライブラリ カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 現在コメント、トラックバックともに受け付けておりません。

コメントは受け付けていません。