我有一个< div style =“border：1px solid border;” />和画布，使用绘制：
context.lineWidth = 1; context.strokeStyle = "gray";
绘图看起来很模糊(lineWidth小于1创建更糟糕的图片)，没有什么靠近div的边框。使用canvas可以获得与HTML相同的绘图质量吗？
var ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 1;
ctx.moveTo(2,2);
ctx.lineTo(98,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> </div></td></tr> </table>
解决方法
在画布中绘制线条时，实际上需要跨越像素。在我看来，这是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(查找“ASK PROFESSOR MARKUP”框，大约下降1/4)
