画布元素中的线条粗细

Question

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

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

在这个例子中,应该是1px的线看起来实际上是2px但颜色较浅.这适用于Chrome 10和Firefox 4.

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

是否有另一种方法来绘制一条线来获得我正在寻找的结果.

Answer 1

请注意该部分

然而,由于路径的定位,最左边和所有其他奇数整数宽度的粗线不会显得清晰.

和

获得清晰的线条需要了解如何抚摸路径.在下面的图像中,网格表示画布坐标网格.网格线之间的正方形是实际的屏幕像素.在下面的第一个网格图像中,填充从(2,1)到(5,5)的矩形.它们之间的整个区域(浅红色)落在像素边界上,因此生成的填充矩形将具有清晰的边缘.

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

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/上的示例