V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Dustyposa
V2EX  ›  JavaScript

如何让 canvas 渲染的文字(fillText)更加平滑呢?

  •  
  •   Dustyposa · 2019-09-07 09:42:10 +08:00 · 6087 次点击
    这是一个创建于 1891 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,求解请问 canvas 如何让渲染字体更加平滑?(抗锯齿) Thanks in advance.:)

    20 条回复    2019-09-15 23:07:39 +08:00
    xiangyuecn
        1
    xiangyuecn  
       2019-09-07 09:46:08 +08:00   ❤️ 3
    canvas 放大 3 倍来进行绘制,然后用 css 把 canvas 缩小成 1/3 来显示,绝对圆润😎
    xnode
        2
    xnode  
       2019-09-07 10:01:26 +08:00
    @xiangyuecn 思路清奇
    Dustyposa
        3
    Dustyposa  
    OP
       2019-09-07 10:02:57 +08:00
    @xiangyuecn 学习了 大佬,备用方案 1
    bumz
        4
    bumz  
       2019-09-07 10:26:53 +08:00 via iPhone
    canvas 不是本来就有抗锯齿

    只不过对于 dpi != 1 的设备要手动缩放如一楼
    Dustyposa
        5
    Dustyposa  
    OP
       2019-09-07 11:15:19 +08:00
    @bumz 也就是只能手动缩放吧?
    redbuck
        6
    redbuck  
       2019-09-07 11:34:48 +08:00
    不是,这本来就是常规解法啊。

    而且有专门的类库处理这个问题,修改了 context 的所有方法,按 dpr 放大
    iwtbauh
        7
    iwtbauh  
       2019-09-07 12:46:17 +08:00 via Android
    平滑(抗锯齿)的话取决于浏览器是否执行次像素( subpixel )平滑 /灰度平滑等技术,这往往取决于操作系统的配置。和字体微调也有关系。有的字体组合微调和抗锯齿(如次像素平滑)会很奇怪。

    如果浏览器没有提供此 browser api 的话就是。也是无能为力的。
    iwtbauh
        8
    iwtbauh  
       2019-09-07 12:46:34 +08:00 via Android
    平滑(抗锯齿)的话取决于浏览器是否执行次像素( subpixel )平滑 /灰度平滑等技术,这往往取决于操作系统的配置。和字体微调也有关系。有的字体组合微调和抗锯齿(如次像素平滑)会很奇怪。

    如果浏览器没有提供此 browser api 的话 js 也是无能为力的。
    iwtbauh
        9
    iwtbauh  
       2019-09-07 12:50:24 +08:00 via Android
    @iwtbauh #8 除非完全在 js 中实现一个 ttf/otf 库,一个字体渲染库,完全不使用浏览器的接口,自己解析字体文件,解释字体代码,然后自己渲染成象素图,并可在其中使用各种平滑技术,如上面说的次像素平滑。这样的话同时需要用户干预,比如需要用户设置他的显示器次像素排列顺序等等。所以不建议。
    whileFalse
        10
    whileFalse  
       2019-09-07 14:34:46 +08:00 via iPhone
    @xiangyuecn 我最近正好在做这件事,将 pdf 转换为高分辨率 jpg 然后保存在服务器,然后展示在浏览器上时还会缩小一次。
    我发现虽然高分辨率渲染可以让部分字体变得平滑,消除像素感,但会让字边缘变得模糊,整体变灰,反而降低了可读性。
    joshuabriter
        11
    joshuabriter  
       2019-09-07 14:43:52 +08:00
    @whileFalse pdf 是标准的印刷文档,里面显示的样式、渲染与平台无关。也就是说在所有平台上展示是一样的。
    whileFalse
        12
    whileFalse  
       2019-09-07 16:46:15 +08:00 via iPhone
    @joshuabriter 我是想表达,对于字体渲染来说,高 dpi 渲染出 bitmap 后缩小的方式虽然能减少字体边缘的锯齿,但会降低字体对比度。
    ho121
        13
    ho121  
       2019-09-07 17:56:56 +08:00 via Android
    @joshuabriter 并不,我有一些 pdf 在 win 和 linux 下就有明显的区别
    LittleWhiteMouse
        14
    LittleWhiteMouse  
       2019-09-07 18:05:19 +08:00
    学习了,我以前都是加阴影的,资源开销就比较大。不过多加几层阴影也可以达到另外的风格,看着还行。
    sunzongzheng
        15
    sunzongzheng  
       2019-09-07 18:28:52 +08:00
    就 1 楼说的方案,我解决了高分屏文字模糊问题
    MMMMMMMMMMMMMMMM
        16
    MMMMMMMMMMMMMMMM  
       2019-09-09 08:39:35 +08:00
    如果字数不多,可以转换成 svg path

    理论上可以无限平滑,不过如果没找到好的轮子,就相当于从头造字体的工作量
    bumz
        17
    bumz  
       2019-09-14 14:34:50 +08:00 via iPhone
    @whileFalse 那是因为你的缩放算法不合格

    理论上放大倍数越高越接近矢量
    whileFalse
        18
    whileFalse  
       2019-09-14 14:45:45 +08:00 via iPhone
    @bumz 对,但是放完了再缩就模糊了
    xiangyuecn
        19
    xiangyuecn  
       2019-09-15 22:28:08 +08:00
    @whileFalse #10 那是因为你画 10 倍粗的线条,可能实际只画了 7 倍,比如缩放一半的时候,你以为有 5 倍,实际上只有 3.5 倍,所以就看不清了。
    如果是纯粹自己用线条勾勒的字符图形,就没有这种缩放问题;文字的绘制比较难控制,估计是指定大小文字的粗细并不是按比例来的。
    whileFalse
        20
    whileFalse  
       2019-09-15 23:07:39 +08:00
    @xiangyuecn 你还是自己试试吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2634 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 03:19 · PVG 11:19 · LAX 19:19 · JFK 22:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.