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

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

canvas是html5中非常强大的功能，但是在绘制的时候如果出现1像素，例如画一条1像素的线可能出现模糊情况。

一、解决方法

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

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

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

二、canvas绘制原理

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

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

三、进一步的解决方法

了解了原理之后，就明白解决问题的根源起点应该在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)

本文转载于:canvas 1px 出现模糊解决方法及原理