画布绘图，如线条，是模糊的 [英] Canvas drawings, like lines, are blurry

问题描述

我有一个 <div style="border:1px solid border;"/> 和画布，使用:

I have a <div style="border:1px solid border;" /> and canvas, which is drawn using:

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

绘图看起来很模糊(lineWidth 小于 1 会产生更糟糕的图片)，并且 div 的边框附近没有任何东西.是否有可能使用画布获得与 HTML 相同的绘图质量?

The drawing looks quite blurry (lineWidth less than one creates even worse picture), and nothing near to the div's border. Is it possible to get the same quality of drawing as HTML using canvas?

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>

推荐答案

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

When drawing lines in canvas, you actually need to straddle the pixels. It was a bizarre choice in the API in my opinion, but easy to work with:

取而代之的是:

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

这样做:

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

深入 HTML5 的画布章节很好地讨论了这一点

这篇关于画布绘图，如线条，是模糊的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！