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

要在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>

基础教程