关于canvas绘图1px模糊的原因及解决方法Canvas在html5中是一个非常强大的功能，但是如果在绘图的时候出现1px，比如画一条1pixel的线可能会出现歧义。1.解决方案网上比较常见的解决方案是+0.5cxt.moveTo(x+0.5,y+0.5)cxt.lineTo(x+0.5,y+0.5)，确实可以让线路恢复到清晰状态，因为画线封装成一个函数，画多条线，多次调用这个函数，有的线是1px，有的线是2px。所以只有了解canvasblur的原理才能更彻底的解决。二、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)
