HTML5 —— canvas画布

画布：HTML5 的 canvas 元素使用 JavaScript。
在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

一、 绘制直线的过程

1. 创建画布：使用html5中画布标签

  <canvas id="id" width="宽度" height="高度">  
  </canvas>

2. JavaScript中获取画布

  document.getElementById('id')

3. 准备画笔：context对象(画笔)，也称为绘制环境，使用该对象在画布中绘制图形 getContext('2d')

4. 绘图：

   (1)绘制线条：

   初始位置、连线端点(终点)、描边(画线)

   2d平面坐标系：画布的左上角是坐标原点(0,0),从原点开始向右延伸是x轴增大,向下延伸是y轴增大

   (2)画线过程：

   • 确定初始位置(起始点)：moveTo(x,y)
   • 确定连接端点(终点)：lineTo(x,y)
   • 描边：stroke()

   (3)线条的样式：

   • 线宽：lineWidth ='数值' ,默认以像素为单位

   • 描边的颜色(线条颜色): strokeStyle = '颜色名或16进制颜色值'

   • 端点的形状：lineCap = '形状'

     butt ： 默认值，无端点形状，显示的是直线的方形边缘
     round：圆形端点
     square：方形端点

   (4)线的路径：在同一个画布中添加再多的连线端点路径只有一条

   • 开始新的路径：beginPath()
   • 闭合路径：closePath()
   • 路径填充：fill()

例子：

 <script>
	var canvas = document.getElementById('cavs');
	var context = canvas.getContext('2d');
	context.strokeStyle = 'red' //描边的颜色
	context.moveTo(10,10); //起始位置
	context.lineTo(10,100);//连线端点(竖线)
	context.lineTo(100,100);//连线端点(横线)
	context.closePath();//闭合路径
	context.stroke();//描边
	context.fill(); //填充	
 </script>		

二、 圆的绘制

arc(x,y,r,开始角,结束角,方向)

参数	内容
x,y	圆心的坐标
r	圆的半径
开始角	开始的圆周率角度
结束角	结束的圆周率角度
方向	绘图方向(顺时针、逆时针)，true表示逆时针，false表示顺时针(默认)

示例：

 		var canvas = document.getElementById('cavs');
        var context = canvas.getContext(