html - 0 < lineWidth < 1 时的 Canvas 线条行为

Question

出于好奇，我想尝试设置 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 时线条会随着循环的进行而变细？ ？这是故意的吗？它可以用于很酷的东西吗？

Answer 1

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

然后为了模拟粗细，渲染器将使用不透明度:0.5 的线将被渲染得更少不透明度以使其看起来“更弱”。
请注意，这也是抗锯齿的工作方式:它将点扩散到几个具有较低权重的相邻点上，以模拟线条的粗细。

我比较了几种绘制三角形的方法，你可以玩下面的 fiddle 。

例如，当我们使用 0.8 不透明度绘制时，我认为我们与 lineWidth=0.5 具有相同的视觉效果。

这里的前两行显示使用整数坐标与使用整数 + 0.5 坐标时的渲染差异。我们看到当使用整数坐标时，线条在两个像素上重叠并且看起来更宽。
我们还看到抗锯齿效果不是很好，因为对角线总是看起来更粗(在此处的 Chrome 或 Firefox 上也是如此)。

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