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;

标签： html5 word html canva red