推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
如何让 canvas 渲染的文字（fillText）更加平滑呢？
Dustyposa · 2019-09-07 09:42:10 +08:00 · 6095 次点击这是一个创建于 1895 天前的主题，其中的信息可能已经有所发展或是发生改变。
如题，求解请问 canvas 如何让渲染字体更加平滑？（抗锯齿） Thanks in advance.:)
 |
1
xiangyuecn 2019-09-07 09:46:08 +08:00  3
canvas 放大 3 倍来进行绘制，然后用 css 把 canvas 缩小成 1/3 来显示，绝对圆润😎
|
 |
2
xnode 2019-09-07 10:01:26 +08:00
@xiangyuecn 思路清奇
|
 |
3
Dustyposa OP @xiangyuecn 学习了 大佬，备用方案 1
|
 |
4
bumz 2019-09-07 10:26:53 +08:00 via iPhone
canvas 不是本来就有抗锯齿
只不过对于 dpi != 1 的设备要手动缩放如一楼 |
 |
6
redbuck 2019-09-07 11:34:48 +08:00
不是，这本来就是常规解法啊。
而且有专门的类库处理这个问题，修改了 context 的所有方法，按 dpr 放大 |
 |
7
iwtbauh 2019-09-07 12:46:17 +08:00 via Android
平滑（抗锯齿）的话取决于浏览器是否执行次像素（ subpixel ）平滑 /灰度平滑等技术，这往往取决于操作系统的配置。和字体微调也有关系。有的字体组合微调和抗锯齿（如次像素平滑）会很奇怪。
如果浏览器没有提供此 browser api 的话就是。也是无能为力的。 |
|
8
iwtbauh 2019-09-07 12:46:34 +08:00 via Android
平滑（抗锯齿）的话取决于浏览器是否执行次像素（ subpixel ）平滑 /灰度平滑等技术，这往往取决于操作系统的配置。和字体微调也有关系。有的字体组合微调和抗锯齿（如次像素平滑）会很奇怪。
如果浏览器没有提供此 browser api 的话 js 也是无能为力的。 |
|
9
iwtbauh 2019-09-07 12:50:24 +08:00 via Android
@iwtbauh #8 除非完全在 js 中实现一个 ttf/otf 库，一个字体渲染库，完全不使用浏览器的接口，自己解析字体文件，解释字体代码，然后自己渲染成象素图，并可在其中使用各种平滑技术，如上面说的次像素平滑。这样的话同时需要用户干预，比如需要用户设置他的显示器次像素排列顺序等等。所以不建议。
|
 |
10
whileFalse 2019-09-07 14:34:46 +08:00 via iPhone
@xiangyuecn 我最近正好在做这件事，将 pdf 转换为高分辨率 jpg 然后保存在服务器，然后展示在浏览器上时还会缩小一次。
我发现虽然高分辨率渲染可以让部分字体变得平滑，消除像素感，但会让字边缘变得模糊，整体变灰，反而降低了可读性。 |
 |
11
joshuabriter 2019-09-07 14:43:52 +08:00
@whileFalse pdf 是标准的印刷文档，里面显示的样式、渲染与平台无关。也就是说在所有平台上展示是一样的。
|
|
12
whileFalse 2019-09-07 16:46:15 +08:00 via iPhone
@joshuabriter 我是想表达，对于字体渲染来说，高 dpi 渲染出 bitmap 后缩小的方式虽然能减少字体边缘的锯齿，但会降低字体对比度。
|
 |
13
ho121 2019-09-07 17:56:56 +08:00 via Android
@joshuabriter 并不，我有一些 pdf 在 win 和 linux 下就有明显的区别
|
 |
14
LittleWhiteMouse 2019-09-07 18:05:19 +08:00
学习了，我以前都是加阴影的，资源开销就比较大。不过多加几层阴影也可以达到另外的风格，看着还行。
|
 |
15
sunzongzheng 2019-09-07 18:28:52 +08:00
就 1 楼说的方案，我解决了高分屏文字模糊问题
|
 |
16
MMMMMMMMMMMMMMMM 2019-09-09 08:39:35 +08:00
如果字数不多，可以转换成 svg path
理论上可以无限平滑，不过如果没找到好的轮子，就相当于从头造字体的工作量 |
|
17
bumz 2019-09-14 14:34:50 +08:00 via iPhone
|
|
18
whileFalse 2019-09-14 14:45:45 +08:00 via iPhone
@bumz 对，但是放完了再缩就模糊了
|
|
19
xiangyuecn 2019-09-15 22:28:08 +08:00
@whileFalse #10 那是因为你画 10 倍粗的线条，可能实际只画了 7 倍，比如缩放一半的时候，你以为有 5 倍，实际上只有 3.5 倍，所以就看不清了。
如果是纯粹自己用线条勾勒的字符图形，就没有这种缩放问题；文字的绘制比较难控制，估计是指定大小文字的粗细并不是按比例来的。 |
|
20
whileFalse 2019-09-15 23:07:39 +08:00
@xiangyuecn 你还是自己试试吧
|
Select Language