问题
Well, if I draw a line with an odd value of lineWidth in HTML5 Canvas I get a blurred line and I know the reason for this problem.
Now, I want to know the solutions to overcome this. I already know a solution for this and which i couldn't implement now. So, please comment on any other solution for this problem.
My Solution : If you have to draw a line with an odd numbered width, then you will have to offset the center of your line by 0.5 up or down. That way rendering will happen at boundary of pixel and not in middle, and you will always have a sharp line with no residue at the end edges.
Let me know if any other solutions other than the above
回答1:
Happily (and Sadly) you have correctly implemented "pixel-snapping" when you add/subtract .5 pixels to get your lines to align with pixel boundaries. Unlike Photoshop, there is no option to automatically pixel snap in canvas. ...I feel your pain!
来源：https://stackoverflow.com/questions/14978771/line-width-in-canvas