Javascript-форум - Показать сообщение отдельно

#1 (**permalink**) 01.03.2009, 21:39

Пример из интернета работает со всеми браузерами:

<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");" ?