canvas在手機端模糊的處理

2021-09-12 06:58:08 字數 975 閱讀 1898

最近在做專案時用到了canvas做趨勢圖，結果畫出來的趨勢圖在模擬器上是清晰的，但放到手機上卻是非常模糊。所以在網上收集了資料，因為裝置畫素和css畫素不一致，而我們用canvas畫圖用的是css畫素，導致在手機上顯示時，canvas被拉伸了，所以導致了canvas的模糊。對於這種情況，我們只要保證用canvas畫圖時用的畫素和裝置畫素之間的對應關係為1:1，那麼，在手機上顯示時就不會出現拉伸的情況，canvas就不會模糊了。

給出如下解決方案：

參考：html：
js：

var canvas = document.getelementbyid('canvas');


var ctx = canvas.getcontext('2d');


var stylew = $(canvas).parent().width() * 0.96;


var styleh = stylew * 3 / 4;


canvas.style.width = stylew;


canvas.style.height = styleh;


var pratio = window.devicepixelratio;


if(pratio)  ele 


/**** 然後剩下的畫圖，要使用stylew和styleh來進行計算畫圖 ******/
stylew和styleh是canvas的顯示畫素，devicepixelratio是裝置的畫素比，乘以devicepixelratio是將畫布大小設定成顯示大小的devicepixelratio倍，然後我們再將畫布放大devicepixelratio倍，這個時候，畫布上（0， 0）到（stylew，styleh）的區域剛好就是我們的顯示區域，而且畫素和裝置畫素是一致的，這個時候在這個區域畫的圖在手機上就能清晰的顯示了。值得一提的是，我們畫圖的區域只是整個畫布的一部分，而不是把整個畫布都當成顯示區域。

fixed在手機端的bug

在ios下，乙個頁面如果有fixed浮層，並且浮層裡面有input，那麼當input focused的時候，fiexed層的位置就會錯亂。如圖 例子 掃碼檢視頁面效果 解決方法是，將除了fiexed層的內容放在div.container裡面並加上以下樣式。即整個body設定100 的高度不做滾動，只...

利用canvas在手機頁面實現景區導航的一點思路

導遊圖是這樣的，導遊圖跟實際路線是有區別的，畢竟我們也不是搞測繪的。實際景點有疏有密，為了效果好，畫圖時分布均勻了。1.獲取手機螢幕寬高，設定canvas標籤的寬高。2.繪製地圖 繪製人。3.獲取所在位置，計算景點與人的距離，選出距離最小的景點。在此點上繪製人。人在景區走動時手機上的地圖就能夠顯示所...

js判斷需要訪問的頁面在手機端還是PC端開啟

方法一 最原始寫的是這樣子，發現在手機端開啟pc端網頁時，是跳轉到pc端的鏈結，但是這個時候移動端頁面顯示不出來，而且會延遲頁面渲染時間 後來發現，其它不變，只要把判斷改一下就ok啦。在pc端只判斷跳轉移動端 pc端專案 if bisipad bisiphoneos bismidp bisuc7 b...