canvas使用之beginPath()函数踩坑记

先贴上网上看到的博客，侵删。

    您的浏览器不支持 HTML5 canvas 标签。

• beginPath

canvas中的绘制方法（如stroke, fill），都会以“上一次beginPath”之后的所有路径为基础进行绘制。比如上述代码实际会画两条红线，而不是一条黑线，一条红线，stroke了两次，都是以第一次beginPath后的所有路径为基础画的。

• 第一次stroke：画①②，黑色

• 第二次stroke：画①②③④，红色（其中①②红色覆盖之前的黑色）
  不管你用moveTo把画笔移动到哪里，只要不beginPath，那你一直都是在画一条路径（注：此处『一条路径』并非指连在一起）

• fillRect与strokeRect这种直接画出独立区域的函数，也不会打断当前的path.

我想实现的功能是根据坐标的不同，而画不同颜色的线条，如下图这种形式，之前不知道beginPath的以上特性，所以很困惑画出来的线条始终只有一个颜色，从上面可以看出，只要不beginPath(),那么第二次执行stroke的时候，不管你是否重新写了moveTo(x, y)函数，都会从刚开始的moveTo(x, y)开始画，这样就会覆盖掉之前画的，所以为了解决这个问题，我在每次画线之前都beginPath,然后条件判断，满足相应的条件，就画对应颜色的线，因为每次都beginPath()了，所以不会出现线条覆盖的问题，从而解决这个问题，但是本方法每画一个点，都要beginPath()一次，暂时还没有想到更好的方法。

主要代码如下，主要逻辑是当m的值在annInt的一奇数下标开头的连续两个整数范围内，就设置画蓝色的线，否则画黑色的线，这里有一个问题是对每一个点m都要遍历数组，来判断它是否应该画蓝色，这里有一个问题是，如何才能知道已经遍历完了整个数组，且m不在范围内，因为可能出现m不在annInt[0]～annInt[1]的范围内，但是在annInt[2]~annINt[3]范围内，于是设置一个标志信息flag，初值为0,每次不满足在数组某两个数范围之间，值就加1.
flag是标志信息，如果当前点m的值并不在annInt的范围内，那么对annInt遍历后，flag的值一定等于（count(annInt）)/2，此时可以按正常心电图来画了,当然因为本问题中annInt的length为偶数，一般情况应写成（count(annInt)+1)/2。

	for (; (px / n) < 30000 && m < 90000; px++, m++) {
		
	flag = 0;
		//判断当前坐标点是否处于房颤，房颤用蓝色线条，正常的用黑色线条
	 for(f = 0; f < count(annInt)&&count(annInt) != 0; f+=2){    
		
  
 if(m >= annInt[f] &&  m