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

Question

我正在尝试使用两个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 条线都相同。首先，为什么会这样以及我能做什么？

<小时/>

这确实很奇怪。我测试了你在这里写的所有内容，结果是一样的。现在我拼命打开火狐，一切看起来都很完美。所以这才与 chrome 相关。

Answer 1

在开始绘图之前添加此行

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);

对于 Canvas ，像素的中心不在屏幕上的绝对像素上。因此，您需要将其偏移半个像素以将其与实际像素对齐，否则像素将被子像素化，从而导致抗锯齿线。

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

^演示快照

您的代码中还存在第二个问题:您正在抚摸线条，然后继续添加到同一路径，这将累积之前添加的所有线条并降低性能。

同样，如果所有线条都具有相同的特征(颜色、粗细等)，则无需对每条线条使用 beginPath()描画每一行。

只需将所有带有 moveTo 和 lineTo 的行添加到路径中(moveTo 将确保这些行未连接)，并且何时循环完成，然后执行常见的中风()。

<强> 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();