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

今企画する时また立ち上がって、私は1つの言叶の中で2つのハイライトを含んで、2つの大きい字体、1つの太字、1つの隷书を表示します.の
私たちはSBになりましたが、私たちは死を待つことはできません.美術の企画ができないのは良いプログラムではないという心理状態で、私たちは彼を解決しなければなりません.
このときdomを懐かしむ人もいるかもしれませんが、そのままなんていいんだろう、あるいはwikiの書き方
お元気ですか.いいですよ.の今腫れていますか.一言でいくつの文字の精霊に分かれますか?また席を並べますか?ダイナミックニュースなら?毎日交換しなければなりませんか??
では、私たちのいくつかの一行の討論を経て、wikiの書き方を使って、構想を実現して最後に言います.
参照
「会社[color=#F 00;weight=bold;size=16;font=隷書]の社長として、自分の会社を発展させようと努力しましょう.会社にいい名前をつけて、自分の[size=18]スーパー会社[/color]を作りましょう」.
ああ、世界は静かになって、今あなたは満足したでしょう!
最後に、実現の考え方を紹介します.
各テキストスプライトには2つの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 .
ブラウザが最下位からサポートされる日を望んでいます.
あなたに役に立つことを望みます!