canvas font组件 HTML5canvasfontmetricsmeasureText

为了响应淘宝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写法你好吗，也行啊。。现在肿么办？一句话分成若干个文字精灵？再排位置？如果是动态新闻呢？天天得换啊？？

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

引用

“作为公司[color=#F00;weight=bold;size=16;font=隶书]老板[/]，努力发展自己的公司吧！给公司起个好[color=red]名字[/]，建造属于自己的[size=18]超级公司[/]。”

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

最后再介绍下实现思路：
每个文字精灵会用到两个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, ...)就可以了。
为什么我们一直追求文字图片化呢？性能更高吗？请参考这个链接www.dzone.com/links/r/html5_canvas_drawtext_considered_harmful.html。

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