javascript - キャンバスに書かれたテキストを文字列として取得する方法

Question

filltext() を使用してキャンバスにテキストを書きました。別の関数で、その値を文字列として取得したいと考えています。誰かが私を助けてくれたらお願いします。前もって感謝します。

Answer 1

キャンバスにテキストを書き込むときは、テキスト自体を含むキャンバス オブジェクトにもカスタム プロパティを追加します。確認したい場合は、そのプロパティをクエリするだけです。そう：

myCanvas.getContext("2d").filltext(theText,x,y,maxWidth);
myCanvas.addedText = theText;

以降、

var textToCheck = myCanvas.addedText;

Answer 2

この w3c の記事はあなたにとって興味深いかもしれません:

作成者が fillText または strokeText を使用してキャンバスにテキストをレンダリングする場合、同じテキスト、スタイル、および位置を持つ html 要素 (div または span) をキャンバス サブドメインに追加する必要もあります。テキストの境界ボックスは、setElementPath メソッドで設定する必要があります ( http://www.w3.org/wiki/Canvas_hit_testingを参照) 。

サブドム テキストはビットマップでレンダリングされたテキストのプロキシとして機能するため、これにより、ユーザー エージェントはサブドム テキストを使用してアクセシブルなエクスペリエンスを提供できます。

アクセシビリティのために作成された例を次に示します。

<canvas id="example" width="260" height="200" role="img">   <p>A <a href="http://en.wikipedia.org/wiki/Rectangle">rectangle</a> with a black border. In the background is a pink circle. Partially overlaying the circle is a green square and a purple triangle, both of which are semi-opaque, so the full circle can be seen underneath.</p>   </canvas>

したがって、ユーザーがテキストを入力したときに、canvas 要素内の div 内に保存するだけで済みます。