javascript - html5キャンバスのfillTextメソッドを使用して非表示のテキストボックスにテキストを配置する方法はありますか？

Question

HTML5ゲームを作成していますが、プレイヤーにテキストで通知する方法が必要です。fillTextメソッドを使用して、このボックスにテキストを入力します。

今、私はテキストを1行でレンダリングする方法しか知りませんが、テキストを収めるには改行が必要なため、明らかにそれだけでは不十分です。これをすばやく行う方法はありますか、それとも自分でコーディングする必要がありますか？

これは、メッセージがゲーム内でどのように見えるかです。

Answer 1

スペックを見ると、キャンバスだけを使いたい場合は自分でやらなければなりません。

measureTextそのためには、テキストのサイズを取得して手動で分割するためにを使用する必要があります。しかし、それはかなり面倒なようです。

私がよりエレガントだと思うもう1つの解決策は、HTMLのオーバーレイを使用することです。そのために使用するHTMLは次のようになります。

<div id="outer" syle="position:relative">
   <canvas id='myCanvas'/>
   <div id="textualDiv" syle="position:absolute"></div>
</div>

次にtextualDiv、必要に応じて配置し、必要なときに入力します。その後、それを非表示にします。そして、必要が生じたときにもう一度それを示してください。