以前、読んだJavaScriptクックブックでは、explorercanvasを使ってIEでcanvasタグを実装する方法について書かれていました。
ただ、問題があって、globalCompositeOperationをサポートしておらず、代替手段を取る必要が発生しました。
そこで、ぐぐってみたところ、FlashCanvasを発見したので、そちらを試しに使ってみることにしました。
コーディングは下のようになります。
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="FlashCanvasPro/bin/flashcanvas.js"></script>
<![endif]-->
</head>
<body>
<div id="container"></div>
<script>
jQuery(function($){
var canvas = document.createElement('canvas');
canvas.style.width = '200px';
canvas.style.height = '200px';
document.getElementById('container').appendChild(canvas);
if (typeof FlashCanvas != "undefined") {
FlashCanvas.initElement(canvas);
if (canvas.getContext){
var context = canvas.getContext('2d');
context.strokeStyle = 'rgb(255,0,0)';
context.fillStyle = 'rgb(255,0,0)';
context.fillRect(20,40,50,100);
}
}
});
</script>
</body>重要なのは、canvasタグを作るたびに、FlashCanvas.initElement()メソッドを実行する必要があるということ。canvasタグをサポートしていない、IE8でも表示することができました。IE7はどうなんだろう？？
しかし、IE8だけだとしてもこれは、すごいなー。
0 コメント:
コメントを投稿