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);

}谨此分享给遇到同样问题的童鞋