如何让 canvas 渲染的文字（fillText）更加平滑呢？

[Dustyposa]

如题，求解请问 canvas 如何让渲染字体更加平滑？（抗锯齿） Thanks in advance.:)

[xiangyuecn]

canvas 放大 3 倍来进行绘制，然后用 css 把 canvas 缩小成 1/3 来显示，绝对圆润😎

[xnode]

@xiangyuecn 思路清奇

[Dustyposa]

@xiangyuecn 学习了 大佬，备用方案 1

[bumz]

canvas 不是本来就有抗锯齿

只不过对于 dpi != 1 的设备要手动缩放如一楼

[Dustyposa]

@bumz 也就是只能手动缩放吧？

[redbuck]

不是，这本来就是常规解法啊。

而且有专门的类库处理这个问题，修改了 context 的所有方法，按 dpr 放大

[iwtbauh]

平滑（抗锯齿）的话取决于浏览器是否执行次像素（ subpixel ）平滑 /灰度平滑等技术，这往往取决于操作系统的配置。和字体微调也有关系。有的字体组合微调和抗锯齿（如次像素平滑）会很奇怪。

如果浏览器没有提供此 browser api 的话就是。也是无能为力的。

[iwtbauh]

平滑（抗锯齿）的话取决于浏览器是否执行次像素（ subpixel ）平滑 /灰度平滑等技术，这往往取决于操作系统的配置。和字体微调也有关系。有的字体组合微调和抗锯齿（如次像素平滑）会很奇怪。

如果浏览器没有提供此 browser api 的话 js 也是无能为力的。

[iwtbauh]

@iwtbauh #8 除非完全在 js 中实现一个 ttf/otf 库，一个字体渲染库，完全不使用浏览器的接口，自己解析字体文件，解释字体代码，然后自己渲染成象素图，并可在其中使用各种平滑技术，如上面说的次像素平滑。这样的话同时需要用户干预，比如需要用户设置他的显示器次像素排列顺序等等。所以不建议。

[whileFalse]

@xiangyuecn 我最近正好在做这件事，将 pdf 转换为高分辨率 jpg 然后保存在服务器，然后展示在浏览器上时还会缩小一次。
我发现虽然高分辨率渲染可以让部分字体变得平滑，消除像素感，但会让字边缘变得模糊，整体变灰，反而降低了可读性。

[joshuabriter]

@whileFalse pdf 是标准的印刷文档，里面显示的样式、渲染与平台无关。也就是说在所有平台上展示是一样的。

[whileFalse]

@joshuabriter 我是想表达，对于字体渲染来说，高 dpi 渲染出 bitmap 后缩小的方式虽然能减少字体边缘的锯齿，但会降低字体对比度。

[ho121]

@joshuabriter 并不，我有一些 pdf 在 win 和 linux 下就有明显的区别

[LittleWhiteMouse]

学习了，我以前都是加阴影的，资源开销就比较大。不过多加几层阴影也可以达到另外的风格，看着还行。

[sunzongzheng]

就 1 楼说的方案，我解决了高分屏文字模糊问题

[MMMMMMMMMMMMMMMM]

如果字数不多，可以转换成 svg path

理论上可以无限平滑，不过如果没找到好的轮子，就相当于从头造字体的工作量

[bumz]

@whileFalse 那是因为你的缩放算法不合格

理论上放大倍数越高越接近矢量

[whileFalse]

@bumz 对，但是放完了再缩就模糊了

[xiangyuecn]

@whileFalse #10 那是因为你画 10 倍粗的线条，可能实际只画了 7 倍，比如缩放一半的时候，你以为有 5 倍，实际上只有 3.5 倍，所以就看不清了。
如果是纯粹自己用线条勾勒的字符图形，就没有这种缩放问题；文字的绘制比较难控制，估计是指定大小文字的粗细并不是按比例来的。

[whileFalse]

@xiangyuecn 你还是自己试试吧