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

出于好奇，我想尝试设置lineWidth < 1因为即使我的分辨率设置正确，1px 的线条看起来也很粗。不出所料，它不起作用，但在 Chrome 和 Firefox 上有这种奇怪的行为（未在其他地方测试过）：

左边是 lineWidth = 1，中间是 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？这是故意的吗？它可以用于很酷的东西吗？

首先要提醒的是，画布中的点以 (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,输出 http://jsbin.com/voqubexu/1/edit?js,output