0 <lineWidth <1时的画布行行为

Question

出于好奇,我想尝试设置,lineWidth < 1因为1px线看起来很胖,即使我的分辨率设置正确.不出所料,它不起作用,但在Chrome和Firefox上有这种奇怪的行为(未在别处测试):

左边是lineWidth = 1,center是lineWidth = 0.5,右边是lineWidth = 0.1

它们是使用以下代码生成的:

ctx.lineWidth = 0.1;

        lis.each(function(i) {

            sx = $(this).offset().left;
            sy = $(this).offset().top;

            ex = sx - (20 * (6-i));
            ey = wh - 80 - (20 * (i + 1));
            eey = ey - (20 * i);

            // Horizontal
            ctx.moveTo(sx,sy+7);
            ctx.lineTo(ex, sy+7);
            ctx.stroke();

            // Vertical
            ctx.moveTo(ex,sy+7);
            ctx.lineTo(ex, ey);
            ctx.stroke();

            // Horizontal
            ctx.moveTo(ex,ey);
            ctx.lineTo(ww - bg_img_width + 100, eey);
            ctx.stroke();
        });

它们按照孩子出现的顺序打印,因此每次都以Alpha开头,以Epsilon结束.

任何人都可以解释为什么当循环进展时线条变得更细0 < lineWidth < 1？这是有意的吗？它可以用于很酷的东西吗？

Answer 1

首先要提醒的是画布中的点以(0.5; 0.5)为中心,因此,要绘制干净的1px宽线,必须在整数坐标+(0.5,0.5)处绘制.

然后为了模拟厚度,渲染器将使用不透明度:0.5线将变得不透明,使其看起来"更弱".
请注意,这也是抗锯齿的工作方式:它以较低的权重扩散几个相邻点上的点,以模拟线的粗细.

你可以玩下面的小提琴我比较几种绘制三角形的方法.

我认为当我们使用0.8不透明度绘制时,我们的视觉效果与lineWidth = 0.5相同.

这两个第一行用于显示使用整数坐标时与使用整数+0.5坐标时的渲染差异.我们看到,当使用整数坐标时,线条在两个像素上重叠并且看起来更宽.
我们还看到抗锯齿并不是那么好,因为对角线总是看起来更厚(这里的Chrome或Firefox也是如此).

http://jsbin.com/voqubexu/1/edit?js,output