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('2d');
	    context.arc(150,80,50,0,2.0*Math.PI,false)
	    context.stroke()

三、 绘制火柴人

代码：

<body>
    <canvas id="cas" width="1000" height="1000"></canvas>
</body>
<script>
    var cas = document.getElementById('cas');
    var context = cas.getContext('2d');
    //绘制头部
    context.arc(400, 100, 30, 0, 2 * Math.PI);
    context.lineWidth = '5';
    context.stroke();
    //绘制脸部
    context.beginPath();
    context.moveTo(390, 90);
    context.lineTo(380, 80);
    context.lineWidth = '5';
    context.stroke();
    context.beginPath();
    context.moveTo(410, 90);
    context.lineTo(420, 80);
    context.lineWidth = '5';
    context.stroke();
    context.beginPath();
    context.arc(390, 100, 5, 0, 2 * Math.PI, true);
    context.closePath();
    context.lineWidth = '5';
    context.stroke();
    context.beginPath();
    context.arc(410, 100, 5, 0, 2 * Math.PI, true);
    context.closePath();
    context.lineWidth = '5';
    context.stroke();
    //绘制躯干
    context.beginPath();
    context.moveTo(400, 130);
    context.lineTo(400, 140);
    context.lineWidth = '5';
    context.stroke();
    context.beginPath();
    context.moveTo(400, 140);
    context.lineTo(450, 260);
    context.lineWidth = '15';
    context.stroke();
    //绘制手臂
    context.beginPath();
    context.moveTo(400, 140);
    context.lineTo(480, 220);
    context.lineTo(520, 180);
    context.lineWidth = '10';
    context.stroke();
    context.beginPath();
    context.arc(520, 180, 10, 0, 2 * Math.PI);
    context.fillStyle = '#000';
    context.fill();
    context.beginPath();
    context.moveTo(520, 180);
    context.lineTo(510, 160);
    context.lineWidth = '4';
    context.lineCap = 'round';
    context.stroke();
    //绘制手臂
    context.beginPath();
    context.moveTo(400, 140);
    context.lineTo(280, 160);
    context.lineTo(330, 220);
    context.lineWidth = '10';
    context.stroke();
    context.beginPath();
    context.arc(330, 220, 10, 0, 2 * Math.PI);
    context.fillStyle = '#000';
    context.fill();
    //绘制腿部
    context.beginPath();
    context.moveTo(450, 260);
    context.lineTo(430, 290);
    context.lineTo(620, 310);
    context.lineWidth = '10';
    context.stroke();
    context.beginPath();
    context.arc(625, 295, 15, 1.55 * Math.PI, 0.55 * Math.PI, true);
    context.closePath();
    context.lineWidth = '5';
    context.stroke();
    //绘制腿部
    context.beginPath();
    context.moveTo(450, 260);
    context.lineTo(500, 220);
    context.lineTo(650, 280);
    context.lineWidth = '10';
    context.stroke();
    context.beginPath();
    context.arc(655, 265, 15, 1.58 * Math.PI, 0.58 * Math.PI, true);
    context.closePath();
    context.lineWidth = '5';
    context.stroke();
</script>