canvas font完美实现

为了响应淘宝KISS理念，为中国开源做小点贡献，故有此文。

主要内容就是实现canvas显示文字，并做好这件简单的事。

策划总是会提出各种需求，如果是dom结构，直接用css样式就可以实现，现在canvas怎么办呢？本文以此为切入点，实现了常规dom里面的样式接口。现列出如下：

top, left
width， height // 自适应并换行
text-align
text-indent
line-height
letter-spacing
font-size
font-weight
font-family
color

现在策划这时还要站出来，我要显示一句话内包含二处高亮，二处大字体，一处粗体，一处隶书。。。



我们就SB了，但我们不能坐以待毙啊，本着不会美术的策划不是好程序的心态，咱们得搞定他。
这时候可能有人会怀念dom，直接用<span style="..."></span>多好啊，或者wiki写法\[color=#0FF\]你好\[/color\]吗(忽略"\")，也行啊。。现在肿么办？一句话分成若干个文字精灵？再排位置？如果是动态新闻呢？天天得换啊？？

好吧，经过我们若干一行人的讨论，使用类wiki的写法，实现思路最后说：

啊，世界清静了，现在你满意了吧！

最后再介绍下实现思路：
每个文字精灵会用到两个canvas，A保存文字（下次draw的时候直接ctx.drawImage()），B生成A的过程中间用。
首先格式化文字，得到一个下面的数组：

[{
    char: '作'
}, {
    char: '为'
}, {
    char: '公'
}, {
    char: '司'
}, {
    char: '老',
    color: '#F00',
    weight: 'bold',
    size: 16,
    font: '隶书'
}, {
    char: '板',
    color: '#F00',
    weight: 'bold',
    size: 16,
    font: '隶书'
}, {
    // ...
}]

然后画在B上，再getImageData，存在数组里面；
最后一步是实现css样式的关键，根据各样式值，把这些字（当图片）画在A上，然后文字精灵画的时候，只需调用ctx.drawImage(A, ...)就可以了。
为什么我们一直追求文字图片化呢？性能更高吗？请参考这个链接[url]。

希望有招一日，浏览器能从底层支持；
希望对你有帮助！

链接地址有误，被当成相对路径了

地址重发下，为什么我们一直追求文字图片化呢？这个地址有问题，楼主。

抱歉，改了。

看了看了，也用了~
用起来需要设置的地方不少呢。。。
顶个~

期待加强版

谢谢，有问题可以讨论（群225270521）

这个后来确实优化了不少，但根本出发点还是从公司需求方面考虑的，而且它只属于游戏引擎的一个小组件。希望这个实现思路对你有用。