這兩天在學習HTML5新屬性時遇到了如下問題，很是不解：
例如在學習使用canvas時，需要繪制一個紅色的原點，代碼如下：
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>HTML5畫布</title>
6 </head>
7
8 <body>
9 <!--定義一塊畫布-->
10 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
11 Your browser does not support the canvas element. 12 </canvas>
13
14 <!--利用js在畫布上繪制圖案-->
15 <script type="text/javascript">
16 var c = document.getElementById("myCanvas"); 17 var cxt = c.getContext("2d"); 18 cxt.fillStyle = "#FF0000"; 19 cxt.beginPath(); 20 cxt.arc(70, 18, 15, 0, Math.PI * 2, true); 21 cxt.closePath(); 22 cxt.fill(); 23 </script>
24
25 </body>
26
27 </html>
效果如下：
但是，如果將js代碼放置在head部分，效果就出不來了：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5畫布</title>
<!--利用js在畫布上繪制圖案-->
<script type="text/javascript">
var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); cxt.fillStyle = "#FF0000"; cxt.beginPath(); cxt.arc(70, 18, 15, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); </script>
</head>
<body>
<!--定義一塊畫布-->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
</body>
</html>
效果如下：
真實郁悶啊，是我哪里搞錯了嗎？瀏覽器版本：
