canvas(画布)
html实例
<canvas id="myCanvas" width="200" height="100"></canvas>
使用style增加边框
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas>
使用js绘制图像
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas> <script> var doc = document; var c = doc.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle="#ff0000"; ctx.fillRect(0,0150,75) </script>
上面的fillStyle方法拥有的参数（x轴，y轴，width，height）；
Canvas-路径
1.moveTo(x,y)定义线条开始坐标
2.lineTo(x,y)定义线条结束坐标
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas> <script> var doc = document; var c = doc.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();//绘制线条 </script>
Canvas-圆
方法：arc(x,y,r,start,stop,counterclockwise)；
x:圆的中心的x坐标
y:圆的中心的y坐标
r：圆的半径
start：起始角，以时钟的三点钟起始。
stop：结束角。
counterclockwise:可选，规定应该逆时针还是顺时针，false=顺时针，true-=逆时针。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas> <script> var doc = document; var c = doc.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script>
具体请参考：http://www.w3school.com.cn/tags/html_ref_canvas.asp
