javascript - 如何消除canvas邊緣鋸齒
大家讲道理
大家讲道理 2017-05-31 10:41:27
0
2
1049

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


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

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回覆(2)
phpcn_u1582

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

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

  2. 將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);

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板