canvas繪圖不清晰的解決方案
現(xiàn)象描述
同樣大小的圖片（60x60px）用canvas和DOM繪制，結(jié)果發(fā)現(xiàn)canvas的畫(huà)面質(zhì)量要差很多。結(jié)果如下圖所示。
上圖中，左側(cè)紅框中的金幣采用DOM繪制，右側(cè)和下方的金幣和文字等使用canvas繪制，結(jié)果canvas繪制的圖片模糊不清。
原因分析
假設(shè)dpr = 2；圖片大小為60x60px;對(duì)dpr有一定的了解基礎(chǔ)。
1.DOM呈現(xiàn)圖片過(guò)程
圖片——》瀏覽器css像素（顯示尺寸）——》屏幕實(shí)際像素
60x60 30x30 60x60
圖片像素——》實(shí)際像素
1： 1
2.canvas繪制過(guò)程
圖片像素——》canvas像素（畫(huà)布尺寸）——》css像素（顯示尺寸）——》屏幕實(shí)際像素
60x60 30x30 30x30 60x60
圖片像素——》畫(huà)布像素——》實(shí)際像素
4： 1： 4
也就是說(shuō)，canvas的繪制過(guò)程中圖片到畫(huà)布的過(guò)程中進(jìn)行了像素的抽稀，畫(huà)布到屏幕像素時(shí)又進(jìn)行了插值，所以造成圖片質(zhì)量下降。
解決方案
放大畫(huà)布的尺寸，但是canvas顯示尺寸不變；
圖片像素——》canvas像素（畫(huà)布尺寸）——》css像素（顯示尺寸）——》屏幕實(shí)際像素
60x60 60x60 30x30 60x60
圖片像素——》實(shí)際像素
1： 1
而canvas的設(shè)計(jì)的時(shí)候正好有對(duì)象的屬性來(lái)分別管理畫(huà)布尺寸和顯示尺寸；canvas的width、height屬性用于管理畫(huà)布尺寸；canvas的style屬性中的width、height正好是顯示尺寸。
也就是說(shuō)解決方案就是設(shè)置舞臺(tái)的尺寸和圖片像素的尺寸一致，顯示尺寸為正常顯示尺寸；假設(shè)canvas的顯示尺寸為窗口寬度，創(chuàng)建canvas的時(shí)候指定canvas的width屬性為2 * body.clientHeight；style.widht為body.clientHeight + 'px';
改變后的效果圖如下：
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了前端取消接口調(diào)用的相關(guān)資料,講解了XMLHttpRequest和AbortController兩種取消HTTP請(qǐng)求的方法,XMLHttpRequest通過(guò)abort()方法取消請(qǐng)求,而AbortController提供了一個(gè)更現(xiàn)代和靈活的解決方案,需要的朋友可以參考下2025-03-03
js removeChild 障眼法 可能出現(xiàn)的錯(cuò)誤
js removeChild 障眼法之可能出現(xiàn)的錯(cuò)誤，大家看下代碼就知道了。2009-10-10
這篇文章主要介紹了Symbol是ES2015新增的一種值類(lèi)型數(shù)據(jù)，表示一種絕不重復(fù)的值,需要的朋友可以參考下2016-12-12
JavaScript進(jìn)階之前端文件上傳和下載示例詳解
這篇文章主要為大家介紹了JavaScript進(jìn)階之前端文件上傳和下載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了CommonJS的模塊加載，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
基于substring()和substr()的使用以及區(qū)別(實(shí)例講解)
下面小編就為大家分享一篇基于substring()和substr()的使用以及區(qū)別實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
下面小編就為大家?guī)?lái)一篇一句話理解閉包(簡(jiǎn)單易懂)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
在JavaScript中，undefined和null是兩個(gè)特殊的值，用于表示缺失或空值，文章通過(guò)代碼示例詳細(xì)介紹undefined與null作用及使用方法，感興趣的同學(xué)可以借鑒一下2023-05-05
對(duì)于搶紅包來(lái)說(shuō)最重要的就是隨機(jī)性算法,如何確保每個(gè)人獲得金額是趨向于平均的,也就是有平均的概率去隨機(jī),而盡量避免兩極分化,本文給大家介紹了用JS實(shí)現(xiàn)搶紅包的三種算法,文中有相關(guān)的代碼示例,需要的朋友可以參考下2024-03-03
使用JS實(shí)現(xiàn)圖片輪播的實(shí)例(前后首尾相接)
下面小編就為大家?guī)?lái)一篇使用JS實(shí)現(xiàn)圖片輪播的實(shí)例(前后首尾相接)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09