2、画一条折线

上一篇笔记中，我们画了一条直线，那么现在我们需要画一条折行怎么办呢？
不难想到，复用lineTo就可以了。

    //当页面加载完成的时候获取一张画布，获取一支画笔
	window.onload=function(){
		var canvas=document.getElementById('canvas');
		canvas.width=600;
		canvas.height=300;
		var context=canvas.getContext('2d');
		context.moveTo(0,0);
		context.lineTo(150,150);
		context.lineTo(0,300);//复用lineTo
		context.lineWidth=5;
		context.strokeStyle="#0FC86A";
		context.stroke();
	}

那么需要画多条折线怎么办，画多条色彩斑斓的折线，绿色的、谈绿色的、黄色的。。。。只需要将画好的折线，平移就可以了啦

//当页面加载完成的时候获取一张画布，获取一支画笔
window.onload=function(){
	var canvas=document.getElementById('canvas');
	canvas.width=600;
	canvas.height=300;
	var context=canvas.getContext('2d');
	
	/*第一条绿色的线*/
	context.moveTo(0,0);
	context.lineTo(50,50);
	context.lineTo(0,100);
	context.lineWidth=5;
	context.strokeStyle="#0FC86A";
	context.stroke();
	
	/*第二条淡绿色的线*/
	context.moveTo(50,0);
	context.lineTo(100,50);
	context.lineTo(50,100);
	context.strokeStyle="greenyellow"
	context.stroke();
	
	/*第三条黄色的线*/
	context.moveTo(100,0);
	context.lineTo(150,50);
	context.lineTo(100,100);
	context.strokeStyle="yellow"
	context.stroke();
}

一画完懵了，不是说好的绿色、淡绿色、黄色的线吗？画完的三条线都是黄色的线了。。。

canvas是基于状态的绘制

上面代码stroke的时候，第一个strok画了(0,0)(50,50)(0,100),绿色的折线，
到第二个stroke时，它用自己的画笔颜色和画笔的大小画了(0,0)(50,50)(0,100)这条折线，再画了(50,0)(100,50)(50,100)这条折线，他们的颜色是淡绿色的
到第三个stroke时，第三个stock用了自己的画笔颜色和画笔大小画了(0,0)(50,50)(0,100)、(50,0)(100,50)(50,100)、(100,0)(150,50)(100,100)这三条折线，颜色是黄色的。

所以我们看到的是三条黄色的折线，其实画布上一共是画了6条折线的，只是后来的折线的颜色把前面的盖住了而已

那么，我只想绘制三条折线啊，难道就没有办法了吗？艺术家之魂到此为止了么？没救了么？不，还有办法。

用beginPath()开始绘制

为了绘制不重复的折线，我们可以在每次绘制前加上beginPath();相当于每次用毛笔写字的时候，每写一次之前，将画笔洗干净，再沾墨水，才开始写。

//当页面加载完成的时候获取一张画布，获取一支画笔
window.onload=function(){
	var canvas=document.getElementById('canvas');
	canvas.width=600;
	canvas.height=300;
	var context=canvas.getContext('2d');
	
	/*第一条绿色的线*/
	context.beginPath();
	context.moveTo(0,0);
	context.lineTo(50,50);
	context.lineTo(0,100);
	context.lineWidth=5;
	context.strokeStyle="#0FC86A";
	context.stroke();
	
	/*第二条谈绿色的线*/
	context.beginPath();
	context.moveTo(50,0);
	context.lineTo(100,50);
	context.lineTo(50,100);
	context.strokeStyle="greenyellow"
	context.stroke();
	
	/*第三条黄色的线*/
	context.beginPath();
	context.moveTo(100,0);
	context.lineTo(150,50);
	context.lineTo(100,100);
	context.strokeStyle="yellow"
	context.stroke();
}

beginPath()是绘制设置状态的起始点，之后代码设置的绘制状态的作用域结束于绘制方法stroke()、fill()或者closePath()。

beginPath()一般和closePath一起用的，有始有终嘛。为了完整性，建议在每个beginPath()之后都用closePath();大多数情况下不使用是没有什么关系的，但是使用的话可以增强代码的可读性以及意想不到的效果。

猜你喜欢