如何在HTML5中使用fillText()绘制文本？

  • Z时代
  • 2024-01-10
  • 分类：综合

要在HTML5中的画布上绘制填充文本，请使用fillText()方法。这是该fillText()方法的语法。它在给定坐标x和y指示的给定位置填充给定文本。默认颜色是黑色。

fillText(text, x, y [, maxWidth ] )

这是该fillText()方法的参数值：

S.没有
参数
描述
1
文本
要写的文字
2
X
x坐标
3
ÿ
y坐标
4
maxWidth
最大允许宽度（以像素为单位）

示例

您可以尝试运行以下代码以fillText()在HTML5中绘制文本：

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas fillText()</title>
   </head>
   <body>
      <canvas id="newCanvas" width="400" height="150" style="border:1px solid #000000;"></canvas>
      <script>
         var c = document.getElementById("newCanvas");
         var ctxt = c.getContext("2d");
         ctxt.fillStyle = '#00F';
         ctxt.font = "20px Georgia";
         ctxt.fillText("Nhooo", 10, 50);
         ctxt.fillStyle = '#Cff765';
         ctxt.font = "30px Verdana";
         ctxt.fillText("简单易学！", 10, 90);
      </script>
   </body>
</html>

以上是 如何在HTML5中使用fillText()绘制文本？ 的全部内容， 来源链接： utcz.com/z/321484.html

回到顶部