1

次の単純なhtmlがあります。

<h1><i>This is a test</i> <span class="wysiwyg-color-red">Hello world</span></h1>

基本的なスタイルのセットとstrokeText html5 キャンバス API メソッドを使用して、テキスト html からキャンバスへのコンバーターを作成したいと考えています。

ノード値の「ツリー」と html html 要素のリストを取得すると便利です。

{ 
  "This is a test": ["i", "h1"],
  "Hello world": ["span class="wysiwyg-color-red", "h1"]
}

そこから、適切なキャンバス テキスト スタイルを生成できます。

答え：

http://jsfiddle.net/AUTJs/4/

4

2 に答える 2

4

これを行う最善の方法は、非表示のコンテナー内の DOM に配置し、ブラウザーに html 内のエラー (閉じられていないタグなど) を調整させてから、そのコンテナー内の要素を単純に繰り返すことです。そのためにはjQueryを使用することをお勧めします。取得したノードごとに、jquery に、タグ名、クラス名、スタイル属性など、必要なもの、内部のテキスト、幅と高さ、および必要なものすべてを提供するように依頼できます。それをキャンバスに描画してから、この要素の子ノードに頼るというように、完了するまで繰り返します。HTML2Canvas ライブラリも同じことを行います。ブラウザに依存して、フォントのサイズと色、Z インデックス、ノードの順序などを伝えます。

あなたのような単純な html であっても、このようにすれば時間と労力を大幅に節約できます。

于 2013-04-16T11:06:33.393 に答える
1

canvas要素に HTML をレンダリングできるものが必要なだけでしょうか? そのため、ページの「スクリーンショット」はcanvas.

http://html2canvas.hertzen.com/とhttp://experiments.hertzen.com/jsfeedback/をチェックしてください。

于 2013-04-16T10:57:58.967 に答える