HTML5画布绘制的线条看起来模糊-html教程-PHP中文网

HTML5画布绘制的线条看起来模糊

WBOY

发布： 2023-09-08 20:45:05

转载

1114 人浏览过

我们在本文中要执行的任务是关于 HTML5 画布绘图，例如线条看起来模糊。

我们观察到模糊效果，因为不同设备的像素比不同。用于查看画布的浏览器或设备经常会影响图像的模糊程度。

Window 接口的 Pixel Ratio 小工具返回显示设备的物理像素与其 CSS 像素分辨率的比例。这个数字也可以理解为物理与CSS像素的比例，或者一个像素与另一个像素的大小。

让我们深入研究以下示例，以了解有关 HTML5 画布绘制（如线条看起来模糊）的更多信息。

示例 1

在下面的示例中，我们采用模糊的简单文本来使其清晰。

HTML5画布绘制的线条看起来模糊

我们正在考虑这张模糊的图像

<!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画布绘制的线条看起来模糊的详细内容。更多信息请关注PHP中文网其他相关文章！