Canvas 2D绘制抗锯齿的1px线条

当绘制1像素的线条时,发现多条线明显存在着粗细不均的问题,线条带有明显的锯齿.

事实上,Canvas的绘制线条指令都存在这个状况,如lineTo,arcTo,strokeRect.

解决方案是将Canvas平移半个像素即可:

var ctx = document.getElementById("canvas").getContext("2d");
ctx.translate(0.5, 0.5);

这意味着,在绘制线条时,如果Canvas上下文中对应的坐标值为整数,那么绘制的中心点恰好是相邻像素的间隙.

于是很显然,基于这个坐标值进行1px的线条渲染时就占据了间隙两侧的像素点,明明指定了lineWidth的值为1,

渲染出来的结果却是2像素宽.