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

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

最佳答案

首先要提醒的一点是， 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

关于html - 0 <lineWidth <1时的 Canvas 线行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24669578/