javascript - 如何消除canvas邊緣鋸齒
問題描述
如題:我做了一個(gè)canvas圖形,出現(xiàn)了邊緣鋸齒
有搜到一個(gè):Bicubic Interpolation的插值算法,但是看不懂,請(qǐng)大神指點(diǎn)Orz!!
問題解答
回答1:可以先試試將canvas的分辨率提高一倍看一看。假設(shè)顯示大小為 w * h:
將canvas的width和height設(shè)為2w和2h
將canvas的style中的width和height設(shè)為w和h
回答2:我看了一些比較好的插件,如echarts(百度圖表),但是1萬多行代碼,實(shí)在是看不了,最后找到了一個(gè)解決方法https://www.zhihu.com/questio...let width = canvas.width,height=canvas.height;if (window.devicePixelRatio) {
canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; canvas.height = height * window.devicePixelRatio; canvas.width = width * window.devicePixelRatio; ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}謹(jǐn)此分享給遇到同樣問題的童鞋
相關(guān)文章:
1. 解決Android webview設(shè)置cookie和cookie丟失的問題2. javascript - nodejs使用mongoose連接數(shù)據(jù)庫(kù),使用post提交表單在后臺(tái),后臺(tái)處理后調(diào)用res.redirect()跳轉(zhuǎn)界面無效?3. javascript - vue2.0中,$refs對(duì)象為什么用駝峰的方式獲取不到屬性?4. javascript - 能否讓vue-cli的express修改express重啟服務(wù)5. node.js - npm install全局安裝出錯(cuò),請(qǐng)問如何解決?謝謝!6. java - 注解上的屬性可以傳遞嗎?7. android - 分享到微信,如何快速轉(zhuǎn)換成字節(jié)數(shù)組8. node.js - mac安裝mongodb第一次啟動(dòng)失敗9. node.js - npm一直提示proxy有問題10. python bottle跑起來以后,定時(shí)執(zhí)行的任務(wù)為什么每次都重復(fù)(多)執(zhí)行一次?
