Html5 Canvas笔记(1)-CanvasAppTemplate代码

学了一段时间的Html5 Canvas，现想一段一段的将学习笔记整理出来放上来，先整理一段Canvas的模版文件代码，以后建立Canvas程序就不用重新写这些代码了，当然最好是将这个Html代码保存到开发环境模板里，这样以后操作简便很多。使用模版时，只需要修改函数drawScreen()的代码即可，后续我的笔记也只在写出此函数的代码。

注：模版中需要说明一点的是，特别注意Canvas元素的高宽是通过自身的Width、Height属性来指定，切忌通过Css来控制Canvas其高宽，由此可能导致最终的画面被缩放、线条出现锯齿等状况。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Canvas Application</title>
 6 <script type="text/javascript">
 7     window.addEventListener("load",eventWindowLoaded,false);
 8     function eventWindowLoaded(){
 9         canvasApp();
10     }
11     function canvasApp(){
12         var theCanvas=document.getElementById("canvas_one");
13         if(!theCanvas||!theCanvas.getContext){return;}
14         var context=theCanvas.getContext("2d");
15         function drawScreen(){
16             context.fillStyle="#FF0000";
17             context.fillRect(0,0,150,75);
18         }
19         drawScreen();
20     }
21 </script>
22 </head>
23 <body>
24     <div style="position:absolute;top:50px;left:50px;">
25         <canvas id="canvas_one" width="500" height="300">
26         浏览器不支持Html5 Canvas
27         </canvas>
28     </div>
29 </body>
30 </html>