キャンバスの内容に基づいてキャンバスの内側の幅と高さを取得する方法はありますか?
ユーザーがキャンバスにテキストを書き込めるようにしたいのですが、ユーザーはフォントサイズ、フォントファミリなどを選択できます。問題は、フォントとテキストの長さを制御できるため、方法がありませんキャンバスの幅と高さを何に設定するかを知っています。
キャンバスをその中のコンテンツと同じ大きさにする方法 (CSS の表示「インライン ブロック」プロパティなど) や、キャンバスの内部コンテンツの幅と高さを取得する方法 (その場合、私はテキストの各文字が書かれた後に幅と高さを調整するだけですか？
はいあります。キャンバス内に子要素を配置します。子要素 css を設定し、position: absolute;そのwidth: 100%;コンテナのフル サイズを取得します。
キャンバスに特定のフォント/フォントサイズのテキストが含まれることがわかっている場合は、キャンバスの measureText 関数を使用できます。ここからこのスニペットを参照してください。
http://www.w3schools.com/tags/canvas_measuretext.asp
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);