文章詳情頁
javascript - 如何消除canvas邊緣鋸齒
瀏覽:163日期:2022-11-30 10:39:02
問題描述
如題:我做了一個canvas圖形,出現了邊緣鋸齒
有搜到一個:Bicubic Interpolation的插值算法,但是看不懂,請大神指點Orz!!
問題解答
回答1:可以先試試將canvas的分辨率提高一倍看一看。假設顯示大小為 w * h:
將canvas的width和height設為2w和2h
將canvas的style中的width和height設為w和h
回答2:我看了一些比較好的插件,如echarts(百度圖表),但是1萬多行代碼,實在是看不了,最后找到了一個解決方法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);
}謹此分享給遇到同樣問題的童鞋
標簽:
JavaScript
相關文章:
1. javascript - 如何將一個div始終固定在某個位置;無論屏幕和分辨率怎么變化;div位置始終不變2. html - vue項目中用到了elementUI問題3. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?4. javascript - vscode alt+shift+f 格式化js代碼,通不過eslint的代碼風格檢查怎么辦。。。5. javascript - 求解答:實例對象調用constructor,此時constructor內的this的指向?6. javascript - 有什么比較好的網頁版shell前端組件?7. java - 如何寫一個intellij-idea插件,實現編譯時修改源代碼的目的8. javascript - [js]為什么畫布里不出現圖片呢?在線等9. java 中Long 類型如何轉換成Double?10. html5 - 有可以一次性把所有 css外部樣式轉為html標簽內style=" "的方法嗎?
排行榜
