canvas提供的绘制文本方法有哪些?
2026-10-20 13:26:08
Canvas提供的绘制文本方法主要有fillText()、strokeText()和measureText()三种，它们分别用于不同场景下的文本处理，以下是具体介绍：
fillText()方法：用于绘制填充文本，即实心文字。其语法为context.fillText(text, x, y, maxWidth)，其中text是要绘制的文本内容，(x, y)是文本绘制的起始坐标，maxWidth是可选参数，用于限制文本的最大宽度。当设置了maxWidth时，如果文本的实际宽度超过该值，浏览器会自动对文本进行缩放以适应指定的宽度。例如，在绘制一段需要填充颜色的标题文字时，就可以使用fillText()方法，通过设置合适的字体样式和颜色，让文字以实心的形式显示在画布上。
strokeText()方法：用于绘制描边文本，也就是镂空文字。它的语法与fillText()类似，为context.strokeText(text, x, y, maxWidth)，参数含义也完全相同。与fillText()不同的是，strokeText()只绘制文本的轮廓，而不填充内部。这种方法常用于需要突出文本轮廓的场景，比如制作一些具有特殊效果的标题或者装饰性文字，通过设置不同的描边颜色和宽度，可以让文字呈现出独特的视觉效果。
measureText()方法：主要用于测量文本的宽度，它返回一个包含width属性的TextMetrics对象。其语法为const metrics = context.measureText(text); const width = metrics.width;，通过调用measureText()并传入要测量的文本，可以得到该文本在画布上绘制时的宽度信息。这个方法在需要实现文本的动态布局时非常有用，例如实现文本的居中显示或者自动换行功能。通过获取文本的宽度，可以精确地计算文本在画布上的位置，从而实现更加灵活和美观的布局效果。
热门标签
