如题,求解请问 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 你还是自己试试吧
|