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.ストローク();

  2. 角度を追加すると、システムは余分な灰色のピクセルを追加します。それがないと、線が見栄えが悪くなります。

  3. 黒色からのみ線を取得する場合は、線の始点と終点の間に多くの個別のピクセル (または lineWidth > 1 が必要な場合は正方形) を描画します。

PSフィドルリンクが壊れてすみません、コードが10回ほど含まれていても、システムは私のメッセージをキックしました...

于 2013-10-20T14:21:29.473 に答える