javascript - 如何消除canvas邊緣鋸齒

Question

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

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

Answer 1

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

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

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

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

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