高清屏中使用Canvas繪圖出現模糊的問題及解決方法

發(fā)布時間：2019-06-03 14:36:57 作者：佚名

這篇文章主要介紹了高清屏中使用Canvas繪圖出現模糊的問題及解決方法,需要的朋友可以參考下

高清屏出現以前，屏幕的一個物理像素就是css所定義的一個邏輯像素（估計那個時候還沒有物理像素和邏輯像素的概念）。因此使用下面代碼就可以在瀏覽器中展示一個600x386的Canvas。

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

總結

以上所述是小編給大家介紹的高清屏中使用Canvas繪圖出現模糊的問題及解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

Tag：高清屏 Canvas 模糊

HTML5 canvas實現擦抹模糊玻璃特效源碼
這是一款基于html5 canvas實現的毛玻璃模糊背景效果源碼。背景是圖片的模糊顯示效果，當鼠標在屏幕上涂抹時，原本模糊的地方會變成清晰的圖片
2019-04-30
深入了解canvas在移動端繪制模糊的問題解決
這篇文章主要介紹了深入了解canvas在移動端繪制模糊的問題解決，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-30
HTML5 Canvas實現帶模糊光暈背景的五角星粒子濾鏡特效動畫源碼
這是一款基于HTML5 Canvas實現帶模糊光暈背景的五角星粒子濾鏡特效動畫源碼。鼠標從畫面上滑過時可看到連續(xù)出現彩色發(fā)光的五角星跟隨鼠標出現、擴散移動并最終消失。右上角
2018-08-20
html5+canvas實現模糊的圓點懸浮背景動畫特效源碼
html5基于canvas繪制帶有透明圓點的模糊背景動畫特效。有需要的朋友可以直接下載使用，本段代碼可以在各個網頁使用
2018-04-04
HTML5 Canvas圖像模糊完美解決辦法
這篇文章主要介紹了HTML5 Canvas圖像模糊完美解決辦法,需要的朋友可以參考下
2018-02-06
一款基于HTML5+Canvas實現的圖片馬賽克模糊動畫特效源碼
經常可以在網上或者電視上看到被馬賽克模糊的圖片或者視頻，今天我們要利用HTML5 Canvas技術來實現圖片的馬賽克模糊效果
2015-02-05
HTML5 Canvas實現3D旋轉物體動畫及模糊發(fā)光特效源碼
這是一款HTML5實現的3D動畫是旋轉物體特效源碼，并且利用CSS3的特性，物體會發(fā)出模糊的發(fā)光的動畫特效，附帶旋轉效果，整體特效看起來炫酷十足。
2014-06-23
html5 Canvas畫圖教程(3)—canvas出現1像素線條模糊不清的原因
上次我們講到，canvas有時候會出現1像素的線條模糊不清且好像更寬的情況,這樣的線條顯然不是我們想要的。這篇文章的目的就是弄清楚里面的原理，以及解決它,感興趣的朋友可
2013-01-09
網曝iPhone 6S首次采取無邊框高清屏
蘋果iPhone 6S的基本配置已確定，采用A9處理器，其內存方面從1G升級到了2G內存，攝像頭方面從800萬像素升級到了1200萬像素的攝像頭
2015-06-18