canvas 1px 出现模糊解决方法及原理

关于canvas绘制1像素出现模糊的缘由及解决方法

canvas是html5中很是强大的功能，可是在绘制的时候若是出现1像素，例如画一条1像素的线可能出现模糊状况。

1、解决方法

网上比较常见的解决方法是+0.5

cxt.moveTo(x+0.5,y+0.5)
cxt.lineTo(x+0.5, y+0.5)

这样确实可让线从新变回清晰的状态
由于把绘制线条封装成一个函数，绘制多条线，屡次调用该函数，出现有的线是1px，有的线是2px。
因此只有理解了canvas出现模糊的原理才能更完全的解决

2、canvas绘制原理

canvas每条线都有一条无限细的中线，线由中线两个伸展。

例如：
当起点是2px时，中线在2px的地方，向左延伸0.5px,向右延伸0.5px，因此这条线应该在1.5px到2.5px的地方，但实际上计算机的最小像素是1px，因此canvas会取一个折中的方法，分别再向左右延伸0.5px，颜色变成原来的一半，因此实际效果看起来变成了2px模糊的线条。

3、进一步的解决方法

了解了原理以后，就明白解决问题的根源起点应该在0.5的地方，这也是为何x,y须要+0.5。当x,y作过计算不必定是整数的时候可能+0.5又出现模糊的状况。因此作一个取整能够保证不会出现模糊的状况

cxt.moveTo(parseInt(x)+0.5, parseInt(y)+0.5)
cxt.lineTo(parseInt(x)+0.5, parseInt(y)+0.5)