javascript - for循环中的lineTo()方法

我正在尝试使用两个for循环绘制网格，一个用于绘制10条垂直线，另一条用于10条水平线。像这样：

for(var i=1;i<10;i++){
  context.moveTo(0,i*b/10);
  context.lineTo(a,i*b/10);
  context.stroke();
}

因此，画出的线条是不同的宽度，模糊。.我读过在moveTo（）和lineTo（）方法中都加上0.5，但这也不起作用。没有成比例的方法可以使所有10条线都相同。
首先，为什么会这样，我该怎么办？



真是奇怪我已经测试了您在此处编写的所有内容，结果是相同的。现在，我拼命打开了Firefox，一切看起来都很完美。因此只有铬才是。

最佳答案

在开始绘制之前添加此行

context.translate(0.5, 0.5);

如果您使用整数作为位置，线条将非常锋利。

具体在您提供的代码中：

context.translate(0.5, 0.5);
....
context.moveTo(0, (i * b / 10)|0); /// y is rounded to integer

或代替翻译：

context.moveTo(0.5, (i * b / 10)|0);

使用画布时，像素的中心不在屏幕上的绝对像素上。因此，您需要将其偏移半个像素以使其与实际像素对齐，否则该像素将被亚像素化，从而产生抗锯齿线。

您也可以在每个位置上加0.5，而不用进行平移，但是平移比较简单。网格完成后，只需平移即可。


演示快照

您的代码中还有第二个问题：您正在抚摸该行，然后继续添加到同一Path，这将累积先前添加的所有行并降低性能。

以同样的方式，如果所有行都具有相同的特征（颜色，粗细等），则也无需为每行使用beginPath()，也无需描边每行。

只需将所有带有moveTo和lineTo的行添加到路径中（moveTo将确保未连接这些行），并在循环完成后执行一个常见的stroke()。

ONLINE DEMO HERE

/// translate 0.5
ctx.translate(0.5, 0.5);

/// create grid
ctx.beginPath();

/// add all grid lines to Path
for(;pos < width; pos += step) {
    ctx.moveTo(pos, 0);
    ctx.lineTo(pos, height);
    ctx.moveTo(0, pos);
    ctx.lineTo(width, pos);
}

/// common stroke = higher performance
ctx.stroke();

关于javascript - for循环中的lineTo()方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18748001/