Canvas 是 HTML5 提供的一个用于绘制图形的标签，通过 Canvas，我们可以在网页上动态绘制各种图形，文字等。在 Canvas 上绘制文字是一个常见的需求，而 fillText() 方法就是用来在 Canvas 上绘制文字的方法之一。
fillText() 方法的基本语法
fillText() 方法用于在 Canvas 上绘制填充的文本。其基本语法如下：
context.fillText(text, x, y, maxWidth);
- text：要绘制的文本内容
- x：绘制文本的 x 坐标
- y：绘制文本的 y 坐标
- maxWidth：可选参数，规定绘制文本的最大宽度
示例代码
下面是一个简单的示例代码，演示了如何在 Canvas 上绘制文本：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- ---------- ------------ ------- ------ ------- ------------- ----------- ---------------------- -------- --- ------ - ------------------------------------ --- --- - ------------------------ -------- - ----- ------- -------------------- --------- --- ---- --------- ------- -------展开代码
在上面的示例中，我们创建了一个 200x100 的 Canvas，并在其中绘制了文本 "Hello, Canvas!"。
fillText() 方法的常用属性
除了上面提到的基本参数外，fillText() 方法还有一些常用的属性可以设置，例如：
- font：设置文本的字体样式和大小
- textAlign：设置文本的水平对齐方式（start、end、left、right、center）
- textBaseline：设置文本的垂直对齐方式（top、hanging、middle、alphabetic、ideographic、bottom）
示例代码
下面是一个演示了如何设置文本样式和对齐方式的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- ---------- ------------ ------- ------ ------- ------------- ----------- ---------------------- -------- --- ------ - ------------------------------------ --- --- - ------------------------ -------- - ----- ------- ------------- - --------- ---------------- - --------- -------------------- --------- ---- ---- --------- ------- -------展开代码
在上面的示例中，我们设置了文本的字体样式为 "30px Arial"，水平对齐方式为 "center"，垂直对齐方式为 "middle"，并在 Canvas 中间绘制了文本 "Hello, Canvas!"。
总结
通过 fillText() 方法，我们可以在 Canvas 上绘制各种样式的文本，从而实现更加丰富的图形效果。希望本文能够帮助你更好地理解和使用 fillText() 方法。
