javascript - 如何消除canvas边缘锯齿
大家讲道理
大家讲道理 2017-05-31 10:41:27
0
2
965

如题:我做了一个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学习者快速成长!