Question

我正试图在白色填充的画布上画一条黑线。由于某些原因，只有该行的内部像素（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>

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

非常感谢！

Answer 1

垂直或水平绘制并添加0.5（jsfiddle.net/xr5az/2/） - 您将只获得黑白颜色。（注意我隐藏线的开头和结尾，它会是灰色的......）

ctx.moveTo（-2,5.5）; ctx.lineTo（17,5.5）; ctx.stroke（）;
当你添加角度时，系统会添加额外的灰色像素，没有它，线看起来会很糟糕。
如果您只想从黑色获取线条，请在线条起点和终点之间绘制许多单独的像素（如果想要线宽> 1，则绘制正方形）。

P.S。对于破碎的小提琴链接，系统踢了我的消息，即使代码包括10次......

HTML 5 Canvas：从线条边缘移除颜色渐变

1 个答案: