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

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

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

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

//在標簽中設置寬和高
<canvas id="canvas" width="324" height="622" >

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

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

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

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

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

scale = window.devicePixelRatio;

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

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

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

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