Javascript，CSS和HTML

Javascript，CSS和HTML - 根据内容调整大小的文本对象(Javascript, CSS, and HTML - text objects that resize based on content)

我是Web开发的新手，我需要创建包含带圆角边框的文本的对象，如图中所示 边框的大小应随着文本的大小而增长。

我不能使用任何css库或css3 border-radius。 有人会介意我指向正确的方向吗？ 我不想要完整的工作代码 - 我想自己想出详细信息 - 但是我会非常感谢链接列表或研究对象。

谢谢！

---编辑----我也不能使用任何css或javascript库。 我这样做是为了一个任务，而不是一个现实世界的场景 - 因此有局限性。

I am very new to web development, and I need to create objects that contain text in a box with rounded edges, as in the image The size of the border should grow with the size of the text.

I can't use any css libraries or css3 border-radius. Would anyone mind pointing me in the right direction? I don't want full working code - I want to figure the details out on my own - but a list of links or subjects to research would be much appreciated.

Thanks!

---edit---- I also can't use any css or javascript libraries. I'm doing this for an assignment rather than a real-world scenario - hence the limitations.

最满意答案

好吧，如果你不使用库和css3 ..你有两个选择：

切片圆形rect的图像，将文本放在div中并创建一堆其他div，背景设置为这些图像，详细信息可以在这里找到

请参考这里使用画布

不用担心，canvas不是一个库，它是Html5规范的一部分（虽然我不知道你是否可以使用html5）阅读更多关于canvas以及如何在这里使用它和一个简单的教程。 这里解释如何在画布中绘制文本

Well, if you don't use libraries and css3.. you have two options:

Slice up images of a rounded rect, put the text within a div and create a bunch of other divs with background set to those images, details can be found here

Use a canvas refer here

Don't worry, canvas isn't a library, its a part of the Html5 spec (though I don't know if you can use html5) Read more about canvas and how to use it here and a simple tutorial here. How to draw text within a canvas is explained here