canvas畫圖被放大且模糊的解決方法

這篇文章主要介紹了canvas畫圖被放大且模糊的解決方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

先來理解canvas的這幾個寬度和高度

canvas.width是畫布的大小，而canvas.style.width是瀏覽器渲染的canvas的尺寸

第一個問題：畫布的高度和寬度

畫布的寬和高一定要在canvas標(biāo)簽中設(shè)置，如果是在css樣式中設(shè)置，則不起作用，畫布會按照默認(rèn)尺寸width：300px，height：150px顯示

//在標(biāo)簽中設(shè)置寬和高
<canvas id="canvas" width="324" height="622" >

除了直接在canvas標(biāo)簽設(shè)置，還可以在繪制的時候設(shè)置，注意畫布的寬高不需要單位

canvas.width = 324;
canvas.height = 622;

第二個問題：繪制的圖形被放大，圖像模糊

這是由于手機的設(shè)備獨立像素和物理像素不一致，設(shè)備像素比=物理像素/設(shè)備獨立像素，大部分手機的設(shè)備像素比為2，這意味著100px的圖像要放在200px中才可以正常顯示

用devicePixelRatio可以獲取到設(shè)備像素比，獲取到像素比后，我們就可以控制圖形的縮放比例

scale = window.devicePixelRatio;

剛剛說了，canvas.style.width是瀏覽器渲染的canvas的尺寸，那要想你畫的圖形正確且清楚的顯示在畫布中，你需要設(shè)置正確的style.width和style.height，如下圖，注意加上單位。

canvas.style.width = canvas.width / scale + 'px';
canvas.style.height= canvas.height/ scale + 'px';

上面我們設(shè)置了畫布的寬度為324，如果不設(shè)置style.width，則畫的圖形會被放大到2倍顯示。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“canvas畫圖被放大且模糊的解決方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!