PixiJs学前篇（三）：Canvas基础【下篇】

前言

在上一篇文章 PixiJs学前篇（二）：Canvas基础【中篇】 中我们了解了Canvas的基本绘制形状，接下来我们看一下如何在 Canvas 中绘制文本。

绘制文本

文本的绘制也是 Canvas 中也是比较常见的，在 Canvas 的绘制中，其实除了图片的绘制基本就是文字的绘制，两者基本五五开，下面我们开始看一下文本是如何让绘制的。

文本的绘制和基本形状的绘制一样，分为描边和填充两种，下面我们分别看一下效果

轮廓绘制：strokeText

strokeText()方法是以描边的方式绘制文字的

语法：

ctx.strokeText(txt, x, y, maxWidth)

参数：

• txt：是绘制的文本内容
• x、y：为绘制文本的起始位置坐标
• maxWidth：可选参数，为文本绘制的最大宽度。

下面举个例子看一下：