我們在使用Canvas進行繪圖時，經(jīng)常會出現(xiàn)繪制的文字或者圖片比較模糊，下面讓我們看一下其產(chǎn)生的原因以及如何解決這個問題。

一、模糊產(chǎn)生的原因

1、style 和 canvas 中定義的寬高不一致造成的

通常，在定義 canvas 時我們會這么寫：

<canvas width="300" height="150" style="width: 300px; height: 150px;" id="canvas"></canvas>

其中，width、height 為 canvas 中繪制的大小，canvas 可以看成是一個畫布，而 width、height 則分別代表這個畫布所繪制區(qū)域的寬高。而 style 中定義的 width、height 則代表實際渲染到頁面上的寬高。

那么問題來了，當(dāng) width、height 和 style 中定義的 width、height 不一致時，canvas 中繪制的元素會根據(jù) width、height 進行縮放或者拉伸到 style 中所定義的 width、height，這就會導(dǎo)致所繪制的圖像比較模糊。

2、所繪制的像素不足 1px

在屏幕上繪制圖像時，最少支持的也是繪制 1px，那么比如我們繪制 0.5px，canvas 會將使用填充算法將其擴展到 1px，如果所擴展的顏色跟原來的顏色一致，那么肯定沒有問題，但是會產(chǎn)生鋸齒狀的一個效果，所以 canvas 會采取周圍的顏色取一個平均值，這就會導(dǎo)致模糊的產(chǎn)生。所以盡量不要設(shè)置半個像素。

3、受到高清屏幕的影響

在我們的普通屏幕上，設(shè)備像素比（Device Pixel Ratio：屏幕的物理像素 / css像素）為 1:1，在這種情況下不會產(chǎn)生模糊的問題。但是如果我們在一個 4k 的屏幕上，設(shè)備像素比為 1.5，那么也就是說屏幕的物理像素 / css像素等于 1.5，即一個 css 像素會渲染到 1.5 個設(shè)備像素上，這就會導(dǎo)致 css 像素會進行擴展，從而產(chǎn)生模糊的問題。

既然知道產(chǎn)生的原因，那么解決起來就很簡單了。其主要的思想就是對 canvas 的 width、height 進行擴展，也就是擴展 canvas 畫布的大小，但是 style 中的 width、height 并沒有改變，這樣 canvas 會進行縮放，這樣一來，點就變多了，但是 canvas 本身的大小并沒有改變（同二倍圖、多倍圖的原理相似）。

二、解決方法

具體來說，有兩種解決方法：

方法一

擴展 canvas 并對 canvas 的繪制上下文也進行擴展，相當(dāng)于同時擴展畫布和畫筆。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio;

const { width, height } = canvas;

canvas.width = Math.round(width * dpr);
canvas.height = Math.round(height * dpr);

ctx.font = "bold 40px 宋體";
ctx.scale(dpr, dpr);

ctx.fillText("你好呀", canvas.clientWidth / 2, canvas.clientHeight / 2);

方法二

擴展 canvas，不擴展 canvas 繪制上下文，但在每次繪制元素時，需要對所繪制的元素進行擴展（即乘以一個設(shè)備像素比）。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio;

const { width, height } = canvas;

canvas.width = Math.round(width * dpr);
canvas.height = Math.round(height * dpr);

// ctx.scale(dpr, dpr);
ctx.font = "bold 40px 宋體";

ctx.fillText("你好呀", (canvas.clientWidth / 2) * dpr, (canvas.clientHeight / 2)  * dpr);

三、知識補充

除了上文的方法，小編還為大家整理了其他Canvas模糊問題產(chǎn)生的解決方法，希望對大家有所幫助

方法

第一步：獲取像素比

第二步：將 canvas 標(biāo)簽上的寬高屬性設(shè)置為 顯示大小 * 像素比

第三步：將 canvas 樣式寬高設(shè)置為 顯示大小

第四步：使用 scale 方法設(shè)置比值

第五步：繪制 canvas 圖形

function createHDCanvas (canvas, w, h) {
  const ratio = window.devicePixelRatio || 1;
  canvas.width = w * ratio; // 實際渲染像素
  canvas.height = h * ratio; // 實際渲染像素
  canvas.style.width = `${w}px`; // 控制顯示大小
  canvas.style.height = `${h}px`; // 控制顯示大小
  const ctx = canvas.getContext('2d')
  ctx.scale(ratio, ratio)
  // canvas 繪制
  return canvas;
}

到此這篇關(guān)于深入理解Canvas模糊問題產(chǎn)生的原因與解決辦法的文章就介紹到這了,更多相關(guān)Canvas模糊問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論