javascript - 有没有办法获取 Canvas 内部内容的宽度和高度？

Question

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

我想允许用户将文本写入画布，并且允许用户选择字体大小、字体系列等。问题是因为他们可以控制字体和文本的长度，我没有办法知道将画布的宽度和高度设置为什么。

那么有没有办法让画布和里面的内容一样大（比如 CSS 的显示“内联块”属性）或获取画布内部内容的宽度和高度的方法（在这种情况下，我只是在写完文本中的每个字母后调整它的宽度和高度）？

Answer 1

就在这里。在画布内放置一个子元素。将子元素 css 设置为position: absolute;并且width: 100%;将占用其容器的完整大小。

Answer 2

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