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

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

  •  
  •   Dustyposa · 72 天前 · 1917 次点击
    这是一个创建于 72 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    20 回复  |  直到 2019-09-15 23:07:39 +08:00
        1
    xiangyuecn   72 天前   ♥ 3
    canvas 放大 3 倍来进行绘制,然后用 css 把 canvas 缩小成 1/3 来显示,绝对圆润😎
        2
    xnode   72 天前
    @xiangyuecn 思路清奇
        3
    Dustyposa   72 天前
    @xiangyuecn 学习了 大佬,备用方案 1
        4
    bumz   72 天前 via iPhone
    canvas 不是本来就有抗锯齿

    只不过对于 dpi != 1 的设备要手动缩放如一楼
        5
    Dustyposa   72 天前
    @bumz 也就是只能手动缩放吧?
        6
    redbuck   72 天前
    不是,这本来就是常规解法啊。

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

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

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

    理论上可以无限平滑,不过如果没找到好的轮子,就相当于从头造字体的工作量
        17
    bumz   65 天前 via iPhone
    @whileFalse 那是因为你的缩放算法不合格

    理论上放大倍数越高越接近矢量
        18
    whileFalse   65 天前 via iPhone
    @bumz 对,但是放完了再缩就模糊了
        19
    xiangyuecn   64 天前
    @whileFalse #10 那是因为你画 10 倍粗的线条,可能实际只画了 7 倍,比如缩放一半的时候,你以为有 5 倍,实际上只有 3.5 倍,所以就看不清了。
    如果是纯粹自己用线条勾勒的字符图形,就没有这种缩放问题;文字的绘制比较难控制,估计是指定大小文字的粗细并不是按比例来的。
        20
    whileFalse   64 天前
    @xiangyuecn 你还是自己试试吧
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2088 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 35ms · UTC 15:52 · PVG 23:52 · LAX 07:52 · JFK 10:52
    ♥ Do have faith in what you're doing.