javascript – So beseitigen Sie gezackte Kanten auf der Leinwand

Question

Wie der Titel: Ich habe eine Leinwandgrafik erstellt und die Kanten waren gezackt

Ich habe einen gefunden: den Interpolationsalgorithmus von Bicubic Interpolation, aber ich kann ihn nicht verstehen. Bitte geben Sie mir einen Rat

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

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