技術標籤：canvascanvas

說明：

lineTo(x, y) 繪製一條從當前位置到指定x以及y位置的直線。
moveTo(x, y) 將筆移動到指定的座標x以及y上。
stroke() 描邊
lineWidth 設定線的寬度
strokeStyle 設定線條的顏色

例項1

		
	window.onload=function(){
		var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
		//先將筆尖移動到0,0處
		ctx.moveTo(0,0);
		//先將筆滑到200,200處
		ctx.lineTo(200,200);
		//執行繪畫的動作，如果沒有執行stroke函式不會有任何的效果
		ctx.stroke();
	}
 

畫了一條從0，0到200,200位置的直線

例項2

	window.onload=function(){
		var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
		
		ctx.lineWidth=10;//設定線條寬度10
		ctx.strokeStyle='green';//設定線條顏色為綠色
		
		//先將筆尖移動到0,0處
		ctx.moveTo(0,0);
		//先將筆滑到200,200處
		ctx.lineTo(200,200);
		//執行繪畫的動作，如果沒有執行stroke函式不會有任何的效果
		ctx.stroke();
	}
 

加上了線的寬度和顏色