這篇文章將為大家詳細(xì)講解有關(guān)高分屏下canvas模糊問題的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

專注于為中小企業(yè)提供做網(wǎng)站、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)姚安免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

前言

最近在做項(xiàng)目的時(shí)候發(fā)現(xiàn)，在公司電腦上沒問題，在自己電腦上確有問題。做的是canvas的項(xiàng)目，在自己電腦上運(yùn)行的時(shí)候，發(fā)現(xiàn)，會(huì)出現(xiàn)點(diǎn)擊選不中的問題還有，canvas刷新會(huì)有殘影問題。首先可以確定，這兩個(gè)問題都是canvas元素邊界有問題，但是從代碼上來(lái)看是沒問題的，因此我就猜測(cè)是否和屏幕有關(guān)，畢竟canvas某些問題確實(shí)和屏幕有關(guān)甚至和硬件顯卡有關(guān)。

devicePixelRatio屬性

果然找出一個(gè)屬性不同： devicePixelRatio；
然后仔細(xì)研究了下這個(gè)屬性的含義，mdn上解釋如下：

此屬性返回當(dāng)前顯示設(shè)備的物理像素分辨率與CSS像素分辨率的比值。該值也可以被解釋為像素大小的比例：即一個(gè)CSS像素的大小相對(duì)于一個(gè)物理像素的大小的比值。

公司的臺(tái)式機(jī)的devicePixelRatio為1，而我自己的電腦為1.25；因?yàn)槲业碾娔X是高清屏的，那么什么是高清屏呢?
高清顯示屏原理如下：

1. 一種具備超高像素密度的液晶屏

2. 同樣大小的屏幕上顯示的像素點(diǎn)由1個(gè)變?yōu)槎鄠€(gè)

那么我們就能知道，高清屏上一個(gè)像素點(diǎn)變成devicePixelRatio個(gè)像素點(diǎn)，因此canvas畫布也會(huì)收到影響，同樣的圖片，在高清屏上會(huì)變大，但是canvas實(shí)際尺寸沒有變大，因?yàn)閳D片會(huì)縮放，導(dǎo)致模糊。

canvas寬高與css寬高

那么如何解決canvas高分屏問題呢？既然高分屏下canvas的像素點(diǎn)會(huì)變多，導(dǎo)致畫布縮放，那么我們能不能通過(guò)某種方法把canvas縮放回去呢？答案是可以的。
我們首先認(rèn)識(shí)一下canvas的像素，我們先繪制一段文字

<canvas id="canvas1" width="300" height="150"></canvas>
....


ctx1.beginPath();
ctx1.font = '20px arial';
ctx1.fillText('Html5 canvas', 50, 50);

這樣我們就得到如下：

我們?cè)趧?chuàng)建一個(gè)畫布，這次我們通過(guò)css設(shè)置畫布的寬高:

<canvas id="canvas2" style="width: 200px; height: 200px"></canvas>
.....



ctx2.beginPath();
ctx2.font = '20px arial';
ctx2.fillText('Html5 canvas', 50, 50);

這次我們得到如下效果：

我們可以很明顯看到畫布上的文字有明顯的縮放，這是為什么呢?我們可以這么理解： canvas是繪制圖片的，我們使用canvas繪制完圖片后，首先生成一張根據(jù)canvas的寬高的圖片，然后通過(guò)dom樹由css渲染出來(lái)，因此canvas的寬高是圖片的實(shí)際寬高，css的寬高是實(shí)際渲染出來(lái)的尺寸。那么我們回過(guò)頭來(lái)理解devicePixelRatio，這個(gè)屬性返回的是設(shè)備的物理像素分辨率與CSS像素分辨率的比值，我們的canvas繪制出來(lái)后圖片因?yàn)楦咔迤猎O(shè)備的影響，導(dǎo)致圖片變大，然而我們?cè)跒g覽器的渲染窗口并沒有變大，因此圖片會(huì)擠壓縮放使得canvas畫布會(huì)變得模糊，盡然高分屏的像素點(diǎn)變多了，導(dǎo)致圖片變大，那么我們可以通過(guò)設(shè)置canvas的寬高設(shè)置devicePixelRatio倍的畫布大小，然后設(shè)置canvas縮放比例為devicePixelRatio倍，保持和canvas等比例放大，然后這樣我們相當(dāng)于在繪制圖片的時(shí)候就縮放圖片變大，然后通過(guò)css渲染又會(huì)縮放回去，這樣canvas的大小就不會(huì)失真了。代碼如下：

function makeHighRes(canvas) {
    var ctx = canvas.getContext('2d');
    // Get the device pixel ratio, falling back to 1.               
    var dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;

    // Get the size of the canvas in CSS pixels.
    var oldWidth = canvas.width;
    var oldHeight = canvas.height;
    // Give the canvas pixel dimensions of their CSS
    // size * the device pixel ratio.
    canvas.width = Math.round(oldWidth * dpr);
    canvas.height = Math.round(oldHeight * dpr);
    canvas.style.width = oldWidth + 'px';
    canvas.style.height = oldHeight + 'px';
    // Scale all drawing operations by the dpr, so you
    // don't have to worry about the difference.
    ctx.scale(dpr, dpr);
    return ctx;
}

另外：網(wǎng)上有一些解決辦法比較古老，使用了backingStoreRatio 這個(gè)屬性，這個(gè)屬性已經(jīng)廢棄！
此外我們也可以使用這個(gè)庫(kù) hidpi-canvas-polyfill，他也是使用的我們這個(gè)方法來(lái)改變canvas繪制視圖的，不過(guò)庫(kù)中還把所有canvas繪制api都縮放了相應(yīng)的devicePixelRatio倍，考慮很完善。

關(guān)于“高分屏下canvas模糊問題的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

標(biāo)題名稱：高分屏下canvas模糊問題的示例分析-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://www.chinadenli.net/article2/dipoic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站導(dǎo)航、云服務(wù)器、外貿(mào)建站、搜索引擎優(yōu)化、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)