IEの「explorercanvas」で作ったCANVASがスクロール
IEの「explorercanvas」で作ったCANVASがスクロール出来ない
HTML5の<canvas>要素を、擬似的に使えるようにした「explorercanvas」↓
http://code.google.com/p/explorercanvas/
ですが、これを使って<canvas>要素を<div>要素の中に配置したんですが、
親の<div>ボックスをスクロールしても、canvasがスクロールされません。
本物の<canvas>要素はちゃんと出来ます。(FirefoxとChromeで確認)
何か代替策ないでしょうか?(canvas内に再描画しろってか..)
(実験したコード)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Canvas Test</title>
<style type="text/css">
</style>
<!--[if IE]><script src="/jslib/excanvas.js"></script><![endif]-->
</head>
<body>
<p>CANVAS</p>
<h2 style="text-align:center">Canvas TEST By HTML5 or IE(excanvas.js)</h2>
<div id="hoge" style="width;500px;overflow:scroll;border:solid 1px gray"></div>
<p>イメージ</p>
<div id="fuga" style="width;500px;overflow:scroll;border:solid 1px gray"></div>
<script type="text/javascript">
//CANVASの場合
var container1 = document.getElementById("hoge");
var canvas = document.createElement("canvas");
canvas.width = 2000;
canvas.height = 500;
container1.appendChild(canvas);
if (typeof(G_vmlCanvasManager) != 'undefined')
canvas = G_vmlCanvasManager.initElement(this.canvas);
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "/image/mio.jpg" + "?" + new Date().getTime();
img.onload = function() {
ctx.drawImage(img,0,0,2000,500);
}
container1.scrollLeft = 500;
//imgの場合
var container2 = document.getElementById("fuga");
var img2 = new Image();
img2.src = "/image/yui.jpg" + "?" + new Date().getTime();
img2.style.width="2000px";
img2.style.height="500px";
container2.appendChild(img2);
container2.scrollLeft = 500;
</script>
</body>
</html>