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

如題:我做了一個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);

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

      最新下載
      更多>
      網站特效
      網站源碼
      網站素材
      前端模板
      關於我們 免責聲明 Sitemap
      PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!