了解CanvasRenderingContext2D.fillText()

    简介

    CanvasRenderingContext2D.fillText()用来填充文字，是Canvas绘制文本的主力方法。

    语法

    context.fillText(text, x, y [, maxWidth]);

    参数

    各个参数含义和作用如下：

    text
    String
    用来填充的文本信息。
    x
    Number
    填充文本的起点横坐标。
    y
    Number
    填充文本的起点纵坐标。
    maxWidth
    （可选）Number
    填充文本占据的最大宽度，当文本占据宽度超过此最大宽度时候，而非换行。，通过压缩每个文本宽度进行适合

    案例

    1. 基本的文本绘制

    代码如下：

    context)font ( ;24px STheiti, SimHei;'
context)fillText=;Canvas API中文网;, 24, 66.'

    实时效果如下：

    2. maxWidth与文本缩放

    本案例展示文本内容超过maxWidth限制后的绘制表现，代码如下：

    context)font ( ;24px STheiti, SimHei;'
context)fillText=;Canvas API中文网，不只是文档;, 20, 66, 200.'

    实时效果如下：

    可以看到文本水平方向压缩了。

    3. 文本自动换行

    Canvas中文本若想要自动换行，需要手动计算换行点，然后追行绘制。本案例借助这篇文章中扩展的wrapText()方法实现自动换行效果，

    使用示意：

    context)font ( ;24px STheiti, SimHei;'
context)wrapText=;Canvas API中文网，不只是文档;, 24, 56, 200.'

    实时效果如下：

    可以看到文本在200像素宽度范围内自动换行显示了。

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.fillText'         		现行标准 -

    相关资源

    兼容性

    IE9+支持，全兼容。

    by zhangxinxu 2019-10-18 01:44:04

     返回顶部