html5 – 画布元素中的线条粗细

我想在canvas元素中制作厚度为1px的线条.

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

在这个例子中,应该是1px的行实际上是2px,但是更浅的颜色.这是Chrome 10和Firefox 4.

我会期望最左边的宽度与该页面上的标题下划线的宽度相同.

还有另一种方法来画一条线来获得我正在寻找的结果.

解决方法

注意部分

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/

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

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/