Question

我想在画布元素中制作厚度为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/

或者，您可以使用宽度为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/

Answer 2

我遇到了同样的问题：我的所有行都比1 px

大得多

以下是我的解决方案之前的内容：

<canvas id="myCanvas"/>
<style type="text/css">
    #myCanvas {
        position: absolute;
        top:0px;
        width:1024px;
        height: 301px;
        background: transparent;
        border: 1px solid #FFF;
        }
</style>

使用CSS设置画布大小。我的解决方案是在html中设置canvas元素的宽度和高度。

<canvas id="myCanvas" width=1024 height=301>

然后一切都很好。

画布元素中的线条粗细

2 个答案: