javascript - 如何消除canvas邊緣鋸齒

問題描述

如題：我做了一個canvas圖形，出現了邊緣鋸齒

有搜到一個：Bicubic Interpolation的插值算法，但是看不懂，請大神指點Orz!!

問題解答

可以先試試將canvas的分辨率提高一倍看一看。假設顯示大小為 w * h：

將canvas的width和height設為2w和2h

將canvas的style中的width和height設為w和h

我看了一些比較好的插件，如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);

}謹此分享給遇到同樣問題的童鞋