画布绘图，如线条，模糊

Question

我有一个 <div style="border:1px solid border;" /> 和画布，它是使用以下方法绘制的：

 context.lineWidth = 1;
context.strokeStyle = "gray";

绘图看起来很模糊（线宽小于 1 会产生更糟糕的画面），而且 div 的边界附近没有任何东西。是否有可能使用画布获得与 HTML 相同的绘图质量？

 var ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 1;
ctx.moveTo(2, 2);
ctx.lineTo(98, 2);
ctx.lineTo(98, 98);
ctx.lineTo(2, 98);
ctx.lineTo(2, 2);
ctx.stroke();

 div {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}
canvas, div {background-color: #F5F5F5;}
canvas {border: 1px solid white;display: block;}

 <table>
<tr><td>Line on canvas:</td><td>1px border:</td></tr>
<tr><td><canvas id="canvas" width="100" height="100"/></td><td><div>&nbsp;</div></td></tr>
</table>

原文由 user572559 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在画布中绘制线条时，您实际上需要跨越像素。在我看来，这是 API 中的一个奇怪选择，但易于使用：

而不是这个：

 context.moveTo(10, 0);
context.lineTo(10, 30);

做这个：

 context.moveTo(10.5, 0);
context.lineTo(10.5, 30);

Dive into HTML5’s canvas chapter talks about this nicely

原文由 Matt Greer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我发现在 CSS 中设置画布大小会导致我的图像以模糊的方式显示。

试试这个：

 <canvas id="preview" width="640" height="260"></canvas>

根据我的帖子： HTML Blurry Canvas Images

原文由 Ben Pretorius 发布，翻译遵循 CC BY-SA 3.0 许可协议