App下載

怎么解決Canvas繪圖出現(xiàn)模糊問(wèn)題?在高清屏解決方法解析!

猿友 2021-08-06 10:37:57 瀏覽數(shù) (2506)
反饋

我們?cè)谑褂酶咔迤吝M(jìn)行工作或者娛樂(lè)的時(shí)候都會(huì)看起來(lái)比較舒適,那么大家知道嗎?屏幕的一個(gè)物理像素就是css所定義的一個(gè)邏輯像素。所以下面我們來(lái)介紹有關(guān)于“怎么解決Canvas繪圖出現(xiàn)模糊問(wèn)題?”這個(gè)問(wèn)題!

先來(lái)看我們的代碼: 

<html>  
  <head>
    <title>Canvas demo</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      html, body {
        width: 100%;
      }
      #canvas {
        display: block;
        border: 1px solid red;
        margin: 10px auto 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="600" height="386">Canvas is not supported</canvas>
    <script>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.arc(300, 150, 20, 0, Math.PI*2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    </script>
  </body>
</html> 

  

總結(jié)

那么在這篇簡(jiǎn)單的有關(guān)于“怎么解決Canvas繪圖出現(xiàn)模糊問(wèn)題?”這個(gè)問(wèn)題的解決方法分享就到了這里了,更多有關(guān)于html5這方面的內(nèi)容大家都可以在W3Cschool這個(gè)網(wǎng)站中進(jìn)行學(xué)習(xí)! 

0 人點(diǎn)贊