学了一段时间的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>