0 <＆lt; 0时的画布线行为lineWidth＆lt; 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