当绘制1像素的线条时,发现多条线明显存在着粗细不均的问题,线条带有明显的锯齿.
事实上,Canvas的绘制线条指令都存在这个状况,如lineTo,arcTo,strokeRect.
解决方案是将Canvas平移半个像素即可:
var ctx = document.getElementById("canvas").getContext("2d"); ctx.translate(0.5, 0.5);
这意味着,在绘制线条时,如果Canvas上下文中对应的坐标值为整数,那么绘制的中心点恰好是相邻像素的间隙.
于是很显然,基于这个坐标值进行1px的线条渲染时就占据了间隙两侧的像素点,明明指定了lineWidth的值为1,
渲染出来的结果却是2像素宽.
原文：http://www.cnblogs.com/fangzhaolee/p/4347908.html