有没有办法获得Canvas内部内容的宽度和高度？

Question

有没有办法根据画布的内容获得画布的内部宽度和高度？

我想允许用户将文本写入画布，并允许用户选择字体大小，字体系列等。问题是因为他们可以控制字体和文本的长度我没有一种了解如何设置画布的宽度和高度的方法。

有没有办法让画布与其中的内容一样大（如CSS的显示“内联块”属性）或获取画布内部内容的宽度和高度的方法（在那个案例我会在文字中的每个字母写完之后调整它的宽度和高度）？

Answer 1

是的，有。将子元素放在画布中。将子元素css设置为position: absolute;和width: 100%;，这将占用其容器的完整大小。

Answer 2

如果您知道画布将包含具有特定字体/字体大小的文本，则可以使用canvas 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);