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>