先來理解canvas的這幾個(gè)寬度和高度

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

第一個(gè)問題：畫布的高度和寬度

畫布的寬和高一定要在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í)候設(shè)置，注意畫布的寬高不需要單位

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

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

這是由于手機(jī)的設(shè)備獨(dú)立像素和物理像素不一致，設(shè)備像素比=物理像素/設(shè)備獨(dú)立像素，大部分手機(jī)的設(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倍顯示。

到此這篇關(guān)于canvas畫圖被放大且模糊的解決方法的文章就介紹到這了,更多相關(guān)canvas圖被放大且模糊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！