4

我正在尝试在白色填充的画布上画一条黑线。由于某些原因，只有那条线的内部像素 (lineWidth = 3) 是真正的黑色。我越靠近线条的边缘，它得到的灰度级越亮。如果我用 lineWith = 1 绘制它，则没有像素是真正的黑色。

我写了一个小例子来说明会发生什么：http: //jsfiddle.net/xr5az/

只是为了完整起见，这里又是代码：

<html>

<head>
<script type="text/javascript">
function page_loaded()
{
  var cv = document.getElementById("cv");
  var ctx = cv.getContext("2d");
  ctx.fillStyle = "#ffffff";
  ctx.strokeStyle = "#000000";
  ctx.lineWidth = 3;
  ctx.lineCap = "round";
  ctx.lineJoin = "bevel";
  ctx.fillRect(0, 0, cv.width, cv.height);
  ctx.moveTo(5, 5);
  ctx.lineTo(10, 10);
  ctx.stroke();
  var imgdata = ctx.getImageData(0, 0, cv.width, cv.height);
  for (var y = 0; y < cv.height; y ++)
  {
    for (var x = 0; x < cv.width; x ++)
    {
      var idx = 4 * (y * cv.width + x);
      var c = imgdata.data[idx]<<16 | imgdata.data[idx+1]<<8 | imgdata.data[idx+2];
      if (c != 0xffffff)
      {
        document.getElementById("debug").innerHTML += x+"x, "+y+"y: "+c.toString(16)+"<br/>";
      }
    }
  }
}
</script>
</head>

<body onload="page_loaded()">
<p>
<canvas id="cv" width="15" height="15"></canvas>
</p>
<p>
Found colors:
<div id="debug"></div>
</body>

</html>

为什么这条线不是黑色的，我该如何解决这个问题？

非常感谢！

4

1 回答 1

2

  1. 垂直或水平绘制并添加 0.5 (jsfiddle.net/xr5az/2/) - 你只会得到黑色和白色。（请注意，我隐藏了行开始和结束，它将是灰色的......）

    ctx.moveTo(-2, 5.5); ctx.lineTo(17, 5.5); ctx.stroke();

  2. 当您添加角度时，系统会添加额外的灰色像素，没有它，线条会看起来很糟糕。

  3. 如果您只想从黑色中获取线条，请在线条起点和终点之间绘制许多单独的像素（如果您希望 lineWidth > 1，则为正方形）。

ps 很抱歉小提琴链接断开，即使包含 10 次代码，系统也会踢我的消息...

于 2013-10-20T14:21:29.473 回答