javascript - 如何消除canvas邊緣鋸齒
問題描述
如題:我做了一個canvas圖形,出現(xiàn)了邊緣鋸齒
有搜到一個: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);
}謹此分享給遇到同樣問題的童鞋
相關文章:
1. docker start -a dockername 老是卡住,什么情況?2. javascript - IOS微信audio標簽不能通過touchend播放3. javascript - 自執(zhí)行函數(shù)是當加載到這個js就執(zhí)行函數(shù)了嗎4. javascript - vue組件通過eventBus通信時,報錯a.$on is not a function5. docker images顯示的鏡像過多,狗眼被亮瞎了,怎么辦?6. docker不顯示端口映射呢?7. docker鏡像push報錯8. javascript - web端請求一個正在被修改的文件會怎么樣?9. javascript - js的shift()方法失效?10. javascript - react,獲取radio的值出錯
