当0 < lineWidth&lt; 1 [英] Canvas line behaviour when 0 &lt; lineWidth &lt; 1

问题描述

出于好奇，我想尝试设置 lineWidth< 1 ，因为1px行看起来很胖，即使我的分辨率设置正确。不奇怪，它不工作，但有这种奇怪的行为在Chrome和Firefox（未在别处测试）：

Out of curiosity I wanted to try to set the lineWidth < 1 because the 1px lines looked fat even with my resolution set correctly. Unsurprisingly it doesn't work but there is this weird behaviour on Chrome and Firefox (not tested elsewhere):

左边是lineWidth = 1，中心是lineWidth = 0.5，右边是lineWidth = 0.1

On the left is with lineWidth = 1, center is lineWidth = 0.5 and right is lineWidth = 0.1

它们是使用此代码生成的：

They were generated with this code:

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结尾。

They are printed in the order their children appear so it starts with Alpha each time and ends with Epsilon.

任何人都可以解释为什么当 0< lineWidth< 1 ？这是打算吗？

Can anyone explain why the lines get thiner as the loop progresses when 0 < lineWidth < 1? Is this intended? Can it be used for cool stuff?

推荐答案

首先要提醒的是，画布中的点集中在（0.5; 0.5 ），所以，要绘制一个干净的1px宽线，一个必须绘制在整数坐标+（0.5，0.5）。

First thing to remind is that points in a canvas are centered on (0.5;0.5) , so ,to draw a clean 1px wide line, one has to draw at integer coordinates + (0.5, 0.5).

然后，为了模拟厚度，渲染器将在不透明度上播放：0.5行将渲染较少的不透明度，使其看起来较弱。

请注意，这是抗锯齿工作的方式：它扩散在几个相邻点上的点具有较低的权重，以模拟线的粗度。

Then to emulate thickness, the renderer will play on opacity : a 0.5 line will be rendered less opacity to make it look 'weaker'.
Notice that this is the way the antialiasing works also : it diffuses the point on several neighbor points with a lower weight to simulate the thickness of the line.

我想我们在使用0.8不透明度绘制时，与lineWidth = 0.5相同的视觉效果。

I think we have same visual effect than with lineWidth=0.5 when we draw with 0.8 opacity for instance.

这两行首先显示使用整数坐标vs时使用整数+ 0.5坐标时的渲染差异。我们看到，当使用整数坐标时，两个像素上的线重叠，并且看起来更宽。

我们还看到，抗锯齿不是那么好，因为对角线总是看起来更厚（在Chrome或Firefox上也一样）。

The two first lines are here to show the the difference in render when using integer coordinates vs when using integer + 0.5 coordinates. We see that when using integer coordinates, the lines overlap on two pixels and seems wider.
We see also that antialiasing is not that good since the diagonal always seems thicker (same on Chrome or Firefox here).

http：// jsbin。 com / voqubexu / 1 / edit？js，输出

这篇关于当0 < lineWidth&lt; 1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！