HTML5 canvasの組込み

WordPressにHTML5のcanvasを組み込んでみた。
IE10以降、FireFox、Crome、Sfariはcanvasをサポートしている。さっそく、次のホームページに掲載されているマニュアルにしたがって試してみた。
http://www.html5.jp/canvas/
一方、IE8はcanvasをサポートしていなくてビットマップの動的グラフィックは動作しなかった。
調べてみると、ExplorerCanvasかFlashCanvasのJavaScriptを組み込むと動作するとのことで、更にFlashCanvasの方が動作が速いらしいので、FlashCanvasを使ってみた。

FlashCanvasの組込み
①入手：次のurlよりダウンロードする
http://code.google.com/p/flashcanvas/

②設置
解凍して次のファイルをサーバーにアップする。
●flashcanvas.js
●flashcanvas.swf
●canvas2png.js</em> (optional)
●proxy.php</em> (optional)
●save.php</em> (optional)

③設置したJavaScriptの参照を<HEAD>内に記述する。
例

<!--[if lt IE 9]>
<script type="text/javascript" src="./wp-content/themes/sample/js/flashcanvas.js"></script>
<![endif]-->

canvasのサンプル
次のソースコードで試してみた。

<script>
function draw() {
var canvas = document.getElementById("sample");
if(canvas.getContext) {
  var context = canvas.getContext('2d');
  context.fillStyle = "rgb(255,204,0)";
  context.fillRect(50,50,100,100);
  context.fillStyle = "rgba(51,153,51,0.6)";
  context.fillRect(100,100,100,100);
  }
}
</script>
<form action="" name="form1"> 
<input type="button" value="CANVAS表示ボタン" onClick="draw()">
</form>
<div style="width:400px;height:200px;border-style:solid;border-width:1px"> 
<canvas id="sample" width="250" height="250" > 
</canvas>
</div>

ボタンをクリックすると表示