溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了canvas畫圖被放大且模糊的解決方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
先來理解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畫圖被放大且模糊的解決方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
