先來理解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圖被放大且模糊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
