使用canvas繪制模糊怎么解決？案例解析！

在之前的幾篇文章中，小編和大家分享了不少的有關(guān)于html5中canvas的使用方法和相關(guān)的實(shí)例，可是在使用之后大家都紛紛的來問小編“使用canvas繪制模糊怎么解決？”這個(gè)問題！下面是相關(guān)內(nèi)容分享！ 

模糊原因

首先，需要理解canvas的展示機(jī)制。

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

我繪制了一張375px的canvas，iphone6的寬度也是375px，ok，canvas鋪滿了整個(gè)屏幕。

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

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

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

好了，模糊的原因知道了，其實(shí)就是高清屏所帶來的麻煩，怎么解決呢？

解決方法

如果是2倍屏，我們把設(shè)計(jì)圖上375px的canvas畫成750px不就解決了？

設(shè)置canvas樣式

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

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

設(shè)置canvas寬高

上面的style并不是canvas的真實(shí)寬高，那么我們?nèi)绾卧O(shè)置它的寬高呢？

普通屏，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);
// 設(shè)置canvas的真實(shí)寬高
canvas.width = pixelRatio * canvas.offsetWidth; // 想當(dāng)于 2 * 375 = 750 
canvas.height = pixelRatio * canvas.offsetHeight;
</script>

那么canvas的寬高就變成了下圖這樣，750寬度的canvas，如果你是2倍屏我就剛好能夠適應(yīng)?。?！

設(shè)置后的寬高

開始畫點(diǎn)

比如，375的設(shè)計(jì)圖上，有一個(gè)半徑為2px的圓點(diǎn)，點(diǎn)的位置是x:100,y:100。

那么我們現(xiàn)在canvas的寬度是750，寬高變成了之前的2倍。為了視覺上位置保持不變，我們畫點(diǎn)的位置就應(yīng)該是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);
// 設(shè)置canvas的真實(shí)寬高
canvas.width = pixelRatio * canvas.offsetWidth; // 想當(dāng)于 2 * 375 = 750 
canvas.height = pixelRatio * canvas.offsetHeight;

// 開始畫點(diǎn)
let ctx = canvas.getContext("2d");
ctx.beginPath();
 // 375設(shè)計(jì)圖上的位置和尺寸都應(yīng)該*pixelRatio 因?yàn)槲覀儸F(xiàn)在的canvas是750
ctx.arc(100*pixelRatio, 100*pixelRatio, 2*pixelRatio, 0, 2 * Math.PI);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.closePath();

// ...你的其他代碼
</script>

那么以上就是關(guān)于“使用canvas繪制模糊怎么解決？”這個(gè)問題的全部內(nèi)容，更多的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)。