html5绘制文本方法_canvas绘制文本API使用指南【详解】

需调用Canvas 2D上下文的font、fillStyle、fillText、strokeText、measureText等API设置样式、绘制实心/描边文本、测量宽度及手动实现多行换行。

如果您希望在HTML5的<canvas></canvas>元素上精确绘制文本内容，则需要调用Canvas 2D渲染上下文提供的原生文本绘制API。以下是使用这些API绘制文本的具体方法：

一、设置字体样式与颜色

在绘制文本前，必须通过font和fillStyle属性配置文本的字体族、大小、粗细及填充颜色，否则将使用默认值（通常为10px sans-serif，黑色），导致显示效果不可控。

1、获取2D上下文对象：const ctx = canvas.getContext('2d');

2、设置字体：例如ctx.font = 'bold 16px Arial, sans-serif';

立即学习“前端免费学习笔记（深入）”；

3、设置填充颜色：ctx.fillStyle = '#333'; 或 ctx.fillStyle = 'rgb(51, 51, 51)';

二、使用fillText绘制实心文本

fillText()是绘制可读性高、适合主体内容的最常用方法，它以指定坐标为基线左端点进行渲染，受当前font、fillStyle及textAlign等属性影响。

1、指定起始坐标：ctx.fillText('Hello World', 50, 80);

2、调整水平对齐方式：ctx.textAlign = 'center'; 后，fillText('Centered', 200, 100)将以x=200为水平中心绘制

3、调整垂直对齐基准：ctx.textBaseline = 'middle'; 可使y坐标指向文本中线，提升定位精度

三、使用strokeText绘制描边文本

strokeText()仅绘制文本轮廓，不填充内部，适用于强调标题、制作镂空效果或叠加在复杂背景上增强可读性，需配合lineWidth与strokeStyle控制描边粗细与颜色。

1、设置描边宽度：ctx.lineWidth = 2;

Ghiblio

专业AI吉卜力风格转换平台，将生活照变身吉卜力风格照

157

查看详情

2、设置描边颜色：ctx.strokeStyle = '#007bff';

3、调用描边绘制：strokeText('Outline', 100, 150);

四、测量文本宽度以实现动态布局

借助measureText()方法可获取文本在当前字体设置下的实际像素宽度，用于居中排版、换行计算或限制区域内的自适应截断，避免文本溢出或重叠。

1、创建文本度量对象：const metrics = ctx.measureText('Dynamic Text');

2、读取宽度值：const width = metrics.width;

3、结合textAlign实现水平居中：ctx.fillText('Centered', canvas.width / 2, 200); 并确保ctx.textAlign = 'center';

五、处理多行文本与换行逻辑

Canvas API本身不支持自动换行，需手动分割字符串并逐行调用fillText()。核心在于根据measureText().width判断单行容纳能力，并按空格或字符边界切分，同时维护行高偏移量。

1、定义最大宽度：const maxWidth = 300;

2、将长文本按空格拆分为单词数组：const words = text.split(' ');

3、逐词累加宽度，超出则换行并重置x坐标与y坐标增量：每次换行后y坐标应增加lineHeight（如24）

以上就是html5绘制文本方法_canvas绘制文本API使用指南【详解】的详细内容，更多请关注php中文网其它相关文章！