fillText() 简介

fillText() 是 Canvas 2D 上下文中用于在画布上绘制填充文字的方法。它使用当前的 fillStyle 样式来填充文本字符的内部区域。

语法

ctx.fillText(text, x, y);
ctx.fillText(text, x, y, maxWidth);

基本用法

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.font = '30px Arial';           // 设置字体样式
ctx.fillStyle = '#3498db';         // 设置文字颜色
ctx.fillText('Hello Canvas', 50, 100);  // 在 (50, 100) 处绘制文字

前置属性

在使用 fillText() 之前，通常需要设置以下属性：

ctx.font = 'bold 24px "Microsoft YaHei", sans-serif';  // 字体样式
ctx.fillStyle = '#e74c3c';                              // 文字颜色
ctx.textAlign = 'center';                               // 水平对齐
ctx.textBaseline = 'middle';                            // 垂直对齐

textAlign 对齐方式

textBaseline 对齐方式

完整示例

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置字体
ctx.font = 'bold 36px "Segoe UI", Arial, sans-serif';

// 绘制不同颜色的文字
ctx.fillStyle = '#e74c3c';
ctx.fillText('红色文字', 50, 80);

ctx.fillStyle = '#2ecc71';
ctx.fillText('绿色文字', 50, 140);

// 使用渐变填充文字
const gradient = ctx.createLinearGradient(50, 190, 320, 230);
gradient.addColorStop(0, '#f39c12');
gradient.addColorStop(1, '#e74c3c');
ctx.fillStyle = gradient;
ctx.fillText('渐变文字', 50, 210);

// 限制最大宽度（自动压缩）
ctx.font = '24px Arial';
ctx.fillStyle = '#9b59b6';
ctx.fillText('超长文字会被压缩', 50, 270, 150);

与 strokeText() 的区别

ctx.font = 'bold 48px Arial';

// 填充文字（实心）
ctx.fillStyle = '#3498db';
ctx.fillText('填充文字', 50, 80);

// 描边文字（空心）
ctx.strokeStyle = '#e74c3c';
ctx.lineWidth = 2;
ctx.strokeText('描边文字', 50, 160);

// 组合使用（填充+描边）
ctx.fillStyle = '#f1c40f';
ctx.fillText('组合效果', 50, 260);
ctx.strokeStyle = '#e67e22';
ctx.lineWidth = 3;
ctx.strokeText('组合效果', 50, 260);

测量文字宽度

const text = 'Hello World';
const metrics = ctx.measureText(text);

console.log(metrics.width);        // 文字像素宽度
console.log(metrics.actualBoundingBoxAscent);   // 文字顶部到基线的距离
console.log(metrics.actualBoundingBoxDescent);  // 文字底部到基线的距离

典型应用

1. 文字居中绘制：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.font = 'bold 32px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = 'white';
ctx.fillText('居中文字', canvas.width / 2, canvas.height / 2);

2. 文字阴影：

ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.font = 'bold 40px Arial';
ctx.fillStyle = '#fff';
ctx.fillText('带阴影的文字', 50, 100);

3. 多行文字：

const lines = ['第一行文字', '第二行文字', '第三行文字'];
const lineHeight = 40;

lines.forEach((line, index) => {
    ctx.fillText(line, 50, 80 + index * lineHeight);
});

注意事项

一句话总结

fillText(text, x, y) 就是在画布指定位置用当前填充样式绘制文字，配合 font、textAlign、textBaseline 可以精确控制文字的外观和对齐方式。