Canvas 文本

HTML Canvas 文本

在 Canvas 上绘制文本

HTML Canvas API 提供了直接在绘图表面上渲染文本的方法。文本绘制的主要属性和方法包括：

• font: 一个字符串属性，定义字体设置，类似于 CSS 的 font 属性（例如，‘20px Arial’, ‘bold 16px sans-serif’）。默认为 ‘10px sans-serif’。
• fillStyle: 设置用于填充文本的颜色、渐变或图案。适用于 fillText()。
• strokeStyle: 设置用于文本描边（轮廓）的颜色、渐变或图案。适用于 strokeText()。
• textAlign: 指定文本相对于 fillText() 或 strokeText() 中提供的 x 坐标的水平对齐方式。可能的值：‘start’, ‘end’, ‘left’, ‘right’, ‘center’。默认为 ‘start’。
• textBaseline: 指定文本相对于 y 坐标的垂直对齐方式。可能的值：‘top’, ‘hanging’, ‘middle’, ‘alphabetic’, ‘ideographic’, ‘bottom’。默认为 ‘alphabetic’。
• fillText(text, x, y, [maxWidth]): 在坐标 (x, y) 处绘制实心（填充）text。可以选择提供 maxWidth 来约束文本宽度，如果需要，文本可能会被压缩或使用更小的字体。
• strokeText(text, x, y, [maxWidth]): 在 (x, y) 处绘制 text 的轮廓。也支持 maxWidth。
• measureText(text): 返回一个 TextMetrics 对象，其中包含有关指定 text 渲染宽度的信息（例如，metrics.width）。这对于绘制之前的定位或布局计算非常有用。

使用 fillText()

此示例使用默认颜色（黑色）填充文本“Hello Canvas!”。

// HTML: <canvas id="myTextCanvas1" width="300" height="100"></canvas>
const canvasFill = document.getElementById('myTextCanvas1');
const ctxFill = canvasFill.getContext('2d');

ctxFill.font = '30px Arial'; // 设置字体大小和字体族
ctxFill.fillText('Hello Canvas!', 10, 50); // 文本, x, y

使用 strokeText()

此示例绘制文本“Hello Canvas!”的轮廓。

// HTML: <canvas id="myTextCanvas2" width="300" height="100"></canvas>
const canvasStroke = document.getElementById('myTextCanvas2');
const ctxStroke = canvasStroke.getContext('2d');

ctxStroke.font = '30px Verdana';
ctxStroke.strokeStyle = 'blue'; // 设置描边颜色
ctxStroke.strokeText('Hello Canvas!', 10, 50);

添加颜色、设置对齐方式和居中文本

此示例演示如何设置文本颜色、更改字体，并在 Canvas 内水平和垂直方向上居中文本。

// HTML: <canvas id="myTextCanvas3" width="400" height="150" style="border:1px solid #ccc;"></canvas>
const canvasCentered = document.getElementById('myTextCanvas3');
const ctxCentered = canvasCentered.getContext('2d');

const text = 'Centered Text!';

// 样式
ctxCentered.font = 'italic bold 24px Comic Sans MS, cursive';
ctxCentered.fillStyle = 'green';

// 对齐
ctxCentered.textAlign = 'center';     // 水平居中
ctxCentered.textBaseline = 'middle';  // 垂直居中

// 计算中心位置
const x = canvasCentered.width / 2;
const y = canvasCentered.height / 2;

// 绘制文本
ctxCentered.fillText(text, x, y);

// 使用 measureText() 的示例
const metrics = ctxCentered.measureText(text);
console.log('Text width:', metrics.width);
// 例如，你可以使用 metrics.width 在文本周围绘制一个框。

应用场景：在游戏中显示得分、标记图表、给图片添加水印，或创建自定义的基于文本的用户界面元素。