html - Canvas 元素中的线条粗细

Question

我想在 Canvas 元素中制作粗细为 1px 的线条。

不过我似乎找不到一个正确的例子。我目前正在使用本网站上的方法 https://developer.mozilla.org/samples/canvas-tutorial/4_5_canvas_linewidth.html

在这个例子中，应该是 1px 的线看起来实际上是 2px 但颜色更浅。这在 Chrome 10 和 Firefox 4 中都存在。

我希望最左边那条线的宽度与该页标题下划线的宽度相同。

是否有另一种方法可以画一条线来获得我正在寻找的结果。

Answer 1

注意部分

However, the leftmost and all other odd-integer-width thickness lines do not appear crisp, because of the path's positioning.

和

Obtaining crisp lines requires understanding how paths are stroked. In the images below, the grid represents the canvas coordinate grid. The squares between gridlines are actual on-screen pixels. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges.

因此，如果您以半像素绘制(当绘制奇数像素宽度的线时)，那么实际绘制的边缘将落在绝对像素上并且看起来很好..

例子在 http://jsfiddle.net/Wav5v/

---

或者您可以使用 fillRect(x,y,width,height)宽度为 1..

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (i=0;i<10;i++){
    ctx.fillRect(5 + i*14, 5, 1+i, 140); 
  }
}

例子在 http://jsfiddle.net/Wav5v/1/