html canvas绘制1px直线时出现的模糊问题。。线的粗细不同是bug么?

Question

想用canvas画个15x15的棋盘。。

js代码：

但是网页上显示出来却是这样

可以看到中间的线明显要比四周的边框粗。。
问了度娘和谷歌，，貌似是因为canvas绘1px的直线就会出现这种问题，，
很多地方说的解决办法是把坐标+0.5，但是试了下并不行啊。。
有啥好的办法解决这个问题么

Answer 1

这个很明显就是坐标要+0.5的问题，至于你说没用，那肯定是你加错地方了——

context.moveTo(0, i + 0.5);
context.lineTo(450, i + 0.5);

context.moveTo(i + 0.5, 0);
context.lineTo(i + 0.5, 450);

我是这么写的，没有问题。

---

最后，我真的很想发点牢骚，觉得我很烦的话踩我就是了。
我其实挺搞不懂你们的……为什么就这么喜欢发图片……
真当网友们是人形JS解释器+人形浏览器吗？光是用看的就能发现你代码的错误？
直接复制粘贴代码不行吗？而且直接复制粘贴比截图更简单吧？
还是说你觉得网友们都很闲，为了回答一个不认识人的问题还要把你图片里面的代码全部手打一遍？

Answer 2

@xiaoboost

照你的改了 变成这样了。。

Answer 3

中间的线重叠了吧 你可以只绘下右边框 最外层再绘一个左上边框

Answer 4

就是你说的那个原因我也遇到过，加0.5