H5 上用canvas繪圖模糊的原因及解決辦法

H5 上用canvas繪圖模糊的原因及解決辦法

原因:

舉個例子,如果canvas設置width = 375,那麼相當於這個圖片的真實寬度就是375,這個時候我用css設置它的寬度爲375,在手機上(比如dpr爲2的手機)渲染出來的就是750(會被放大兩倍)

解決辦法:

canvas畫一個放大過的圖片(750),我代碼裏設置它寬度375,手機渲染出來的是750 和圖片真實尺寸750一樣大,所以不會模糊

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章