了解一下canvas中两个重要的方法:beginPath()和closePath();
beiginPath()开始一段新路径
canvas中的绘制方法(如stroke,fill),都是以”上一次的beiginPath”之后的所有路径为基础进行绘制。
如下:
得到的是两条红线,而并非是一条黑线,一条红线。
并且,仔细观察,我们还会发现,第一条直线的宽度要比第二条宽度要宽。这是因为canvas的每条线都有一条无限细的中线,线条的宽度是从中线向两侧延伸的,因为计算机是不允许小于1px的图形的,因此延伸后的宽度变成了2px.Canvas中的line把中线与像素的起点对齐了,而不是像素的中间点。为了解决这个问题,我们让线条的中线和像素的中间点对齐,如本例中的第二条曲线的画法。另外,对于lineWidth>1的线,我们可以忽略这个问题,只有线宽为1px的时候,这个问题最明显。
如果你画出的图形和你想像的不一样,记得查看是否有合理的
说到beiginPath,就不得不提及closePath();
必须要注意的一点是:closePath()的作用不是结束路径,而是关闭路径,它会试图从当前路径的重点连一条路径到起点,让整个路径闭合起来。但是,这并不意味着它之后的路径就是新路径了。
如上面的例子,即使我们在第一个stroke之后,加上一句closePath()也不会出现一红一黑的线,但是如果我们在第一个stroke之后,加上一句beginPath(),可以如愿以偿的得到2个
不要企图通过闭合现有路径来开始一条新路径,而开始一条新路径,以前的路径也不会闭合。 因此在适当的地方开启新路径和闭合路径。