在canvas中绘制文本（stroke text in canvas element）

阅读更多

最近对一些在线应用（乘着云计算的忽悠风）很感兴趣，特别是在线的图形处理，于是稍稍学习了一点canvas开发。

 

有了cavas元素，浏览器就可以原生支持矢量绘图——当然还是以相当底层的方式。不过简陋一点没关系，仅凭写进HTML5标准这一点，就足够让它脱颖而出，受到热烈追捧了；以至于出现了专门基于canvas的游戏库：GameJS，在它上面至少可以流畅地运行俄罗斯方块。

 

不幸的是，不是所有主流浏览器都能完整支持canvas。Chrome 2.0+貌似实现得不错。Firefox就差强人意，到3.0版也只实现了个七七八八。IE就更不用说了，它甚至根本就没打算支持（嗯，微软的发言人确实说过他们会考虑的）；不过，google code上有一个基于VML的canvas实现：explorercanvas，可以给IE“安上”这个标准；性能据说不错，某些情况下，甚至还超过了chrome和firefox的原生支持。Opera和Safari没用过，不知实现效果如何。

 

现在回到正题，在cavas中绘制文本——这个很基本的功能却被许多浏览器初期实现自动忽略了。于是大家八仙过海，各显神通地来克服这个困难。有篇blog（Rendering text with ）专门总结了4种自行绘制文本的方法：

 

1. 用独立的htm元素，叠放到canvas上：比如每次调用strokeText都生成一个div，然后用css绝对定位把它放到canvas上面适当的位置。典型例子是TextCanvas；这种方式的最大问题就是文本和画布（canvas）其实是分离的，没法整体做变换（比如平移、旋转、放大之类的），而且文本自身也很难旋转（看看一大堆求CSS旋转文字的帖子就知道了）。
2. 用特定浏览器的drawWindow方法实现：这个比较诡异，貌似是chrome独有的方法，现在应该没啥大用了；
3. 用cavas的drawImage()方法来“画”文本：这个倒是能实现直接显示在canvas中，可以整体进行transform，做个平移、旋转啥的还不错；当然，放大、缩小效果就不那么好了。更为致命的问题是，英文也还罢了，咱大不了把ASCII字符都做成图片字库，中文咋办，难道要学毕昇...。貌似博主自己写了个bitmap font库，当然只支持英文。
4. 直接用矢量图把文字“画”出来。不得不承认老外就是敢想敢干（no harm），这等吃力不讨好的事，居然有不止一个实现，还都成熟度挺高。博主举的例子都有些老了，当前最流行的大概是strokeText，前面提到的GameJS就用了它；这个方法的最大问题就是性能，GameJS的作者这样评价“Canvas doesn’t support the drawString method yet, and the performance of the alternative I currently use (strokeText.js) is quite bad”。Google code上还有个看起来挺象样子的project:canvas-text，支持一大堆字体，当然不可能有中文。想想把每个汉字都一笔一笔画出来，还得处理提笔和顿笔，浏览器会发疯的

这样看来竟然没有什么好办法了——其实也没那么悲观，答案就是。。。直接用浏览器的标准实现。有人该说这不废话嘛，浏览器要实现了，你前面还罗哩罗嗦说一堆干嘛。呵呵，问题是这世界变化快啊，目前不支持，不表示将来也不支持啊，而且它们的支持是有铁证的：

 

1. Chrome：目前的最流行的2.0版就支持了
2. Firefox：3.5版可以支持，现在可以下载到的 3.5 beta 4
3. IE：这个稍麻烦一点，excanvas的最新release，r3版还不支持，不过直接找源码的话，就会发现从r58开始加入了text特性，最新版本是r60。应该说这个不算原生支持，不过既然excanvas项目是google自己在支撑，还是可以信任的。
4. Opera：一向宣称最契合标准的浏览器，当然也义无反顾地支持啦（未验证，但在其中文官网上有文档介绍）
5. Safari：传说中canvas标签就是Safari引入的，想必应该支持吧

BTW: canvas的应用还不够成熟，到现在甚至都没有一个像样API文档。