canvas矩形内部添加字体

要在Canvas矩形内部添加字体，您可以使用CanvasRenderingContext2D中的fillText()方法。该方法用于在Canvas上绘制填充文本。

例如，以下代码将在Canvas矩形内部添加“Hello World”文本：

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

// 绘制矩形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);

// 添加文本
ctx.fillStyle = 'white';
ctx.font = '24px Arial';
ctx.textAlign = 'center';
ctx.fillText('Hello World', 60, 40);

在上面的示例中，fillText()方法的第一个参数是要绘制的文本，第二个和第三个参数是文本的x和y坐标。您可以使用textAlign属性来设置水平对齐方式，例如center或right。

请注意，如果矩形太小以至于无法容纳文本，则文本可能会被裁剪。