📅 最后修改于: 2023-12-03 14:41:53.906000 🧑 作者: Mango
HTML 画布 fillText() 方法用于在画布上绘制文本。
语法：
context.fillText(text,x,y,maxWidth);
参数：
text：要绘制的文本内容，可以是字符串或数字。x：开始绘制文本的 x 坐标位置。y：开始绘制文本的 y 坐标位置。maxWidth：可选参数，即最大文本宽度。下面是一个简单的例子，展示了如何使用 fillText() 方法绘制文本：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "30px Arial";
context.fillText("Hello World",10,50);
</script>
</body>
</html>
在这个例子中，我们创建了一个带有 ID 为 myCanvas 的画布，并设置了它的宽度和高度。然后，我们获取了画布的上下文对象，并将字体设置为 "30px Arial"。最后，我们调用了 fillText() 方法，在 (10,50) 的位置绘制了文本 "Hello World"。
当我们设置了 maxWidth 参数时，fillText() 方法将会根据这个参数自动截断文本。下面是一个示例：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "20px Arial";
context.fillText("Hello World",10,20,80);
</script>
</body>
</html>
在这个例子中，我们在 fillText() 方法的后面添加了一个参数，即最大文本宽度为 80 像素。这意味着，当字符串的宽度超过 80 像素时，超出部分将被自动截断。
HTML 画布 fillText() 方法非常简单易用，可以用于在画布上绘制文本。我们可以用它来绘制标题、标签、按钮等等。有关更多信息，请参阅 MDN 文档。