画布元素中的线条粗细

Question

我想在canvas元素中画出1像素粗的线。

但是，我似乎找不到正确的示例。目前我正在使用此网站上的方法：https://developer.mozilla.org/samples/canvas-tutorial/4_5_canvas_linewidth.html

在这个示例中，应为1像素的线看起来实际上是2像素，但颜色较浅。这在Chrome 10和Firefox 4中都是如此。

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

是否有其他方法可以绘制线条以获得我需要的结果？

- Mike

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

请查看此示例

- Gabriele Petrioli

---

你知道为什么会这样吗？这非常奇怪。 - therin

WPF 也有同样的问题，我猜是出于同样的原因。请查看此 MSDN 文章以获取一些解释：http://msdn.microsoft.com/zh-cn/library/aa970908.aspx - Jelle Vergeer

Answer 2

我会尽力为您进行翻译。以下是您需要翻译的内容：

我遇到了同样的问题：所有线条都比1像素大得多。

这是我的解决方法之前的情况：

<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 id="myCanvas" width=1024 height=301>

然后一切都正常了。

- Bryan