Пример из интернета работает со всеми браузерами:
<html>
<head>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript">
function draw(id) {
var canvas = document.getElementById(id);
var ctx = 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);
}
</script>
</head>
<body>
<canvas id="canvasId" width="150" height="150"></canvas>
<br/><br/>
<input style="width:auto;" type="button" value="Нарисовать" onclick="draw('canvasId');">
</body>
</html>
Файл "excanvas.js" лежит в папке рядом с html-файлом.
Не могу добиться того же результата при создании канвы скриптом:
<html>
<head>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript">
function draw()
{
document.write("<canvas id='canvasId' width='150' height='150'><\/canvas>");
var canvas = document.getElementById('canvasId');
var ctx = 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);
}
</script>
</head>
<body>
<input style="width:auto;" type="button" value="Нарисовать" onclick="draw();">
</body>
</html>
Собственно, в последнем примере еще какой-то баг (работает только в ГуглХроме, а ФФ и Опера требуют перед и после канвы какого-либо текста.)
Но почему ИЕ не проходит строку "var ctx = canvas.getContext("2d");" ?
