国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > HTML5 > 正文

關于canvas繪制模糊問題的解決方法

2024-09-05 07:23:03
字體:
來源:轉載
供稿:網友

模糊原因

首先,需要理解canvas的展示機制。

<canvas id="map" width="375" height="667"></canvas>

我繪制了一張375px的canvas,iphone6的寬度也是375px,ok,canvas鋪滿了整個屏幕。

那么canvas的大小就是375px,canvas類似于圖片,一張375px的圖片,我們就把它當做是圖片來看就好了。我,尖沙咀段坤說的。

如果遇到了屏幕寬度400px的手機,那么圖片會 拉伸,canvas也會拉伸,拉伸則必然會模糊。

那么iphone6確實是375px寬度的手機,還是會出現模糊問題,為什么呢?手機端會存在高清屏的問題。也就是我們說的2倍屏或者3倍屏,也叫作屏幕的DPI。高清屏在繪制界面時,會把2px的寬度渲染成1px,也就達到了高清的效果。也就是說,我們在高清屏下看到的375px其實是750個像素點繪制出來的,canvas其實是375px被拉伸到了750px再展示出來的,拉伸則必然會模糊。

好了,模糊的原因知道了,其實就是高清屏所帶來的麻煩,怎么解決呢?

解決方法

如果是2倍屏,我們把設計圖上375px的canvas畫成750px不就解決了?

設置canvas樣式

這里我們不寫width和height,而直接寫style。把它看成是圖片,我們先不管圖片原寬高是多少,不管拉伸還是壓縮,直接讓他鋪滿整個屏幕。style里寫的寬高不是圖片的原寬高,也就是style里寫的寬高并不是canvas的真實寬高

<canvas id="map" style="width: 375px;height:330px;"></canvas>

設置canvas寬高

上面的style并不是canvas的真實寬高,那么我們如何設置它的寬高呢?

普通屏,2倍屏,3倍屏如果分別適配?

<canvas id="map" style="width: 375px;height:330px;"></canvas><script>let canvas = document.querySelector('#map');// 獲取到屏幕倒是是幾倍屏。let getPixelRatio = function(context) {  var backingStore = context.backingStorePixelRatio ||    context.webkitBackingStorePixelRatio ||    context.mozBackingStorePixelRatio ||    context.msBackingStorePixelRatio ||    context.oBackingStorePixelRatio ||    context.backingStorePixelRatio || 1;   return (window.devicePixelRatio || 1) / backingStore;}; // iphone6下得到是2 const pixelRatio = getPixelRatio(canvas);// 設置canvas的真實寬高canvas.width = pixelRatio * canvas.offsetWidth; // 想當于 2 * 375 = 750 canvas.height = pixelRatio * canvas.offsetHeight;</script>

那么canvas的寬高就變成了下圖這樣,750寬度的canvas,如果你是2倍屏我就剛好能夠適應!!!

設置后的寬高

開始畫點

比如,375的設計圖上,有一個半徑為2px的圓點,點的位置是x:100,y:100。

那么我們現在canvas的寬度是750,寬高變成了之前的2倍。為了視覺上位置保持不變,我們畫點的位置就應該是x:100*pixelRatio,y:100*pixelRatio。

完整代碼如下:

<canvas id="map" style="width: 375px;height:330px;"></canvas><script>let canvas = document.querySelector('#map');// 獲取到屏幕倒是是幾倍屏。let getPixelRatio = function(context) {  var backingStore = context.backingStorePixelRatio ||    context.webkitBackingStorePixelRatio ||    context.mozBackingStorePixelRatio ||    context.msBackingStorePixelRatio ||    context.oBackingStorePixelRatio ||    context.backingStorePixelRatio || 1;   return (window.devicePixelRatio || 1) / backingStore;}; // iphone6下得到是2 const pixelRatio = getPixelRatio(canvas);// 設置canvas的真實寬高canvas.width = pixelRatio * canvas.offsetWidth; // 想當于 2 * 375 = 750 canvas.height = pixelRatio * canvas.offsetHeight;// 開始畫點let ctx = canvas.getContext("2d");ctx.beginPath(); // 375設計圖上的位置和尺寸都應該*pixelRatio 因為我們現在的canvas是750ctx.arc(100*pixelRatio, 100*pixelRatio, 2*pixelRatio, 0, 2 * Math.PI);ctx.fillStyle = "#fff";ctx.fill();ctx.closePath();// ...你的其他代碼</script>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 白山市| 丹凤县| 武邑县| 安宁市| 秦皇岛市| 翁牛特旗| 兴城市| 阿尔山市| 句容市| 宁陵县| 昆山市| 吐鲁番市| 汾阳市| 随州市| 平凉市| 大港区| 山东省| 兴安县| 巴青县| 武冈市| 垦利县| 长治市| 溧阳市| 旅游| 睢宁县| 湖州市| 金平| 礼泉县| 株洲市| 巴里| 昌图县| 琼结县| 沈丘县| 泽库县| 宁远县| 渭南市| 华坪县| 武威市| 昭觉县| 万源市| 梁平县|