canvas学习——绘制文本

最新推荐文章于 2025-05-16 07:34:02 发布

xm2by

最新推荐文章于 2025-05-16 07:34:02 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： canvas javascript 文章标签： fillText strokeText font textAlign canvas

本文链接：https://blog.youkuaiyun.com/XuM222222/article/details/82414173

javascript 同时被 2 个专栏收录

72 篇文章

订阅专栏

canvas

6 篇文章

订阅专栏

本文介绍了如何在canvas上绘制文本，包括使用fillText和strokeText方法，以及如何设置文本的颜色、大小、类型和对齐方式。详细解释了fillText用于填充颜色的文本，strokeText则用于绘制镂空边框的文本，并探讨了maxWidth参数的作用。同时，文章还讲解了如何通过font属性改变字体大小和类型，以及使用textAlign属性调整文本的水平对齐方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas学习——绘制文本

canvas绘制文本的两种方法：

1、 fillText(text, x, y, maxWidth)

绘制带有颜色填充的文本

text——必填，需要绘制的文本内容；
x——必填，文本内容在canvas中绘制时起始位置的水平坐标；
y——必填，文本内容在canvas中绘制时起始位置的垂直坐标；
maxWidth——选填，设置文本的最大宽度，当文本内容的宽度大于maxWidth时，文本内容会被压缩至宽度为maxWidth；当文本内容宽度小于maxWidth是，文本内容正常显示；

2、 strokeText(text, x, y, maxWidth)

绘制镂空文本，仅字体边框带有颜色

text——必填，需要绘制的文本内容；
x——必填，文本内容在canvas中绘制时起始位置的水平坐标；
y——必填，文本内容在canvas中绘制时起始位置的垂直坐标；
maxWidth——选填，设置文本的最大宽度，当文本内容的宽度大于maxWidth时，文本内容会被压缩至宽度为maxWidth；当文本内容宽度小于maxWidth是，文本内容正常显示；

canvas中绘制文本样式设置：

let canvas = document.querySelector('.canvas'),
    ctx = canvas.getContext('2d');

1、字体颜色设置：

填充文本颜色设置：ctx.fillStyle = 'color'；color可以是颜色的英文名称或16进制；
镂空文本颜色设置：ctx.strokeStyle = 'color'；color可以是颜色的英文名称或16进制；

2、字体大小、类型设置：

通过ctx的font属性设置字体的大小和类型：ctx.font = 'font-size font-family'；font-size为字体大小，如：32px；font-family为字体类型，如：Mircrosoft YaHei；

3、文本的对齐方式：

通过ctx的textAlign属性设置文本的水平对齐方式：ctx.textAlign = 'start(默认) || left || center || right || end'；start、left、center、right、end为textAlign的取值，默认是start。其中，start和left效果一样，将文本内容左对齐于文本绘制的起始位置；center将文本内容在文本绘制的起始位置两侧各占一半；end和right效果一样，将文本内容右对齐于文本绘制的起始位置；（文本绘制的起始位置指的是fillText或strokeText中的x位置）
文本在垂直方向上的位置由fillText或strokeText中的y来控制；