理解Canvas像素边界

时间:2021-11-06 17:03:15

大家看下面的例子

var context = document.getElementById('canvas').getContext('2d');

      context.lineWidth = 1;
      context.beginPath();
      context.moveTo(50, 10);
      context.lineTo(450, 10);
      context.stroke();
      context.beginPath();
      context.moveTo(50.5, 50.5);
      context.lineTo(450.5, 50.5);
      context.stroke();

可以看到

理解Canvas像素边界

我们会发现上面线条宽度比下面要宽,可是我们设置的context.lineWidth = 1;,为什么会出现这种情况呢?

下面让我们看看什么是像素边界

如果你在某2个像素的边界处绘制一条1像素宽的线段,那么该线段实际上会占据2个像素的宽度。
如果在像素边界处绘制一条1像素宽的垂直线段,canvas的绘图环境对象会试着将半个像素画在边界中线的右边,将另外半个像素画在边界中线的左边。

可是在一个整像素的范围内绘制半个像素宽的线段是不可能的,所以左右两个方向上的半个像素都被扩展为1个像素。

可是我们如何来绘制1像素的线段呢?

我们可以把1个像素绘制在某两个像素之间的一个像素正中间,这样的话,中线左右两端的那半个像素就不会再延伸了,它们合起来恰好占据1个像素。

理解Canvas像素边界
在像素边界处绘制线段

理解Canvas像素边界
在某个像素范围内绘制线段