绘图应用详解（<canvas>标记）第一篇
<canvas>标记是HTML5中新增的一个HTML元素。
注解：
1.在向html5中添加<canvas>元素时，需要设置元素的id、宽度值和高度值。
1 <canvas id="myCanvas" width="100px" heigth="100"></canvas>
2.canvas 本身没有绘图能力，需要在js的帮助下完成。
1 <script type="text/javascript"> 2 var c=document.getElementById("myCanvas"); 3 var cxt=c.getContext("2d"); 4 ctx.fillStyle="#ff0000"; 5 ctx.fillRect(0,0,150,85); 6 </script>
使用js绘图流程
1.js通过id来寻找<canvas>元素
2.创建context对象getContext("2d")是内建的h5对象
3.绘制一个红色矩形
方法 fillStyle（）功能是将矩形染成红色。
方法 fillRect(0,0,150,85)设置图形的性状，位置，尺寸。
6.2HTML Dom Canvas对象
1.canvas 对象属性
width和hight 默认值是300
2.canvas 对象的方法
<canvas>只有一个方法getContext()，此方法用于返回画布上的一个环境。当前唯一合法的是“2d”指定二维绘图。
getContext()的返回值是一个CanvasRendingContext2D对象。
实例：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 body{ 8 font-size:70%; 9 font-family:"Courier New", Courier, monospace; 10 } 11 </style> 12 <script type="text/javascript"> 13 function cnvs_getCoordinates(e){ 14 x=e.clientX; 15 y=e.clientY; 16 document.getElementById("xycoordinates").innerHTML="Coorfonates:("+x+","+y+")"; 17 } 18 function cnvs_clearCoordinates(){ 19 document.getElementById("xycoordinates").innerHTML=""; 20 } 21 </script> 22 </head> 23 24 <body style="margin:0px"> 25 <p>将鼠标放在矩形框上</p> 26 <div id="coordiv" style="float:left; width:199px; height:99px; border:1px solid black;" onMouseMove="cnvs_getCoordinates(event)" 27 onMouseOut="cnvs_clearCoordinates()"></div> 28 <br/> 29 <br/> 30 <br/> 31 <div id="xycoordinates"></div> 32 33 </body> 34 </html>
同样也可以用另一种方法显示：
将js单独放在一个文件中。
