App下載

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

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

我們在使用高清屏進(jìn)行工作或者娛樂的時候都會看起來比較舒適，那么大家知道嗎？屏幕的一個物理像素就是css所定義的一個邏輯像素。所以下面我們來介紹有關(guān)于“怎么解決Canvas繪圖出現(xiàn)模糊問題？”這個問題！

先來看我們的代碼： 

<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é)

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

HTML5

0 人點贊