html5:canvas入门！

1.canvas是HTML5中的新标签，用来绘制图像，最终渲染为图片的形式

<canvas id="canvas" width="800" height="600"></canvas>

 注意：canvas标签中直接给宽高，不在css中设置宽高，其余属性能够在css中设置，canvas是设置画布的，具体是在JavaScript中进行绘制

案例一：绘制实心的矩形以及空心的矩形，还有清除画布上指定区域的内容

<script type="text/javascript">

		var cvs = document.getElementById('canvas');

		var cv = cvs.getContext('2d');
		
		cv.fillStyle = '#333'; //设置填充颜色

		// 画一个实心的矩形
		cv.fillRect(100,100,100,80); //  前两个参数值是矩形左上角的坐标值，后两个是width，height
		
		cv.strokeStyle = '#ff6700'; //设置空心矩形边的颜色

		cv.lineWidth = 20; //设置线条的粗细
		// 画一个空心的矩形
		cv.strokeRect(220,130,80,100); //  前两个参数值是矩形左上角的坐标值，后两个是width，height；

//将指定范围上绘制的图像清除
		cv.clearRect(50,50,100,100) // 前两个参数值是矩形左上角的坐标值，后两个是width，height
		
	</script>

fillRect( ): 绘制实心的矩形，前两个参数是坐标起点，后两个参数是宽和高；

fillStyle: 设置填充的颜色；

strokeRect: 绘制空心的矩形，前两个参数是坐标起点，后两个参数是宽和高；

strokeStyle( ): 绘制实心的矩形，前两个参数是坐标起点，后两个参数是宽和高；

lineWidth: 设置线条的粗细

案例二：不闭合路径

<canvas id="canvas" width="800" height="600"></canvas>

	<script type="text/javascript">

		var cvs = document.getElementById('canvas');

		var cv = cvs.getContext('2d');
		
		//开启路径
		cv.beginPath();
		//设置起点
		cv.moveTo(10,20);
		//设置终点
		cv.lineTo(500,200);
		cv.lineTo(300, 500);
		cv.lineTo(400, 120);
		//指定线条的颜色
		cv.strokeStyle = '#ff6700';
		//指定线条的粗细
		cv.lineWidth = 5;
		//绘制线条
		cv.stroke();
	</script>

案例三：闭合路径

<canvas id="canvas" width="800" height="600"></canvas>

	<script type="text/javascript">

		var cvs = document.getElementById('canvas');

		var cv = cvs.getContext('2d');
		
		//开启路径
		cv.beginPath();
		//设置起点
		cv.moveTo(10,20);
		//设置终点
		cv.lineTo(500,200);
		cv.lineTo(300, 500);
		cv.closePath(); //将路径的最后一个终点以起点进行链接，造成闭合路径
		//指定线条的颜色
		cv.strokeStyle = '#ff6700';
		//指定线条的粗细
		cv.lineWidth = 5;
		//绘制线条
		cv.stroke();
		//设置路径填充色
		cv.fillStyle = 'yellow';
		//填充路径
		cv.fill();
	</script>