私は信じられないほど愚かなことをしていることを知っているので、別の目が私の愚かさを指摘できることを望んでいました. Webshims ポリフィルを単純なキャンバス テストで動作させようとしています (最初に試してみました)。Chrome と IE9 では問題なく動作しますが、IE8 と IE7 (開発者ツール) でテストすると、次のエラーが表示されます。
オブジェクトはプロパティまたはメソッド「getContext」をサポートしていません
これが私のコードです
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="js-webshim/minified/extras/modernizr-custom.js"></script>
<script>
// set options for html5shiv
if(!window.html5){
window.html5 = {};
}
window.html5.shivMethods = false;
</script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script class="example">
window.FlashCanvasOptions = {
disableContextMenu: true
};
$.webshims.setOptions({
waitReady: false
});
$.webshims.polyfill();
</script>
</head>
<body>
<canvas id="my-canvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var ctx = $('#my-canvas').getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
window.FlashCanvasOptions = {disableContextMenu: true};
$.webshims.setOptions('canvas', {type: 'excanvas'});
</script>
</body>
</html>
キャンバス コードを jquery 対応関数でラップすると、エラーは発生しませんが、キャンバスもレンダリングされません。
$(function(){
var ctx = $('#my-canvas').getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
});
BrowserStack でテストしたところ、同じ結果が得られました。私は何を間違っていますか?私の薄暗さをみんなに公開できてうれしいです..!