我们观察到模糊效果，因为不同设备的像素比不同。用于查看画布的浏览器或设备经常会影响图像的模糊程度。
window 接口的 pixel ratio 小工具返回显示设备的物理像素与其 css 像素分辨率的比例。这个数字也可以理解为物理与css像素的比例，或者一个像素与另一个像素的大小。
让我们深入研究以下示例，以了解有关 html5 画布绘制（如线条看起来模糊）的更多信息。
示例 1在下面的示例中，我们采用模糊的简单文本来使其清晰。
我们正在考虑这张模糊的图像
<!doctype html><html><body> <canvas id=my tutorial style=border:1px solid black;> </canvas> <script> var canvas = document.getelementbyid('my tutorial'); var ctx = canvas.getcontext('2d'); window.devicepixelratio=2; var size = 170; canvas.style.width = size + px; canvas.style.height = size + px; var scale = window.devicepixelratio; canvas.width = math.floor(size * scale); canvas.height = math.floor(size * scale); ctx.scale(scale, scale); ctx.font = '10px arial'; ctx.textalign = 'center'; ctx.textbaseline = 'middle'; var x = size / 2; var y = size / 2; var textstring = tutorialspoint; ctx.filltext(textstring, x, y); </script></body></html>
当脚本执行时，它将生成文本输出，我们已经将其作为上面的示例进行考虑，而不会变得模糊。
示例 2考虑到我们的绘图看起来有点模糊。
<!doctype html><html> <style> div { border: 1px solid black; width: 100px; height: 100px; } canvas, div {background-color: #f5f5f5;} canvas {border: 1px solid white;display: block;} </style><body> <table> <tr><td>line on canvas:</td></tr> <tr><td><canvas id=tutorial width=100 height=100></td><td><div> </div></td></tr> </table> <script> var ctx = document.getelementbyid(tutorial).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(); </script></body></html>
运行上述脚本时，会出现输出窗口，在画布上显示一条模糊的线，并在网页上显示 1 像素边框。
以上就是html5画布绘制的线条看起来模糊的详细内容。