搜尋

首頁 >web前端 >html教學 >HTML5畫布繪製的線條看起來模糊

HTML5畫布繪製的線條看起來模糊

WBOY
WBOY轉載
2023-09-08 20:45:051141瀏覽

我們在本文中要執行的任務是關於 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中文網其他相關文章！

html5 css 接口
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：如何在HTML中指定是否啟用自動完成功能的或