用好几招，在 Canvas 里显示网络字体

2023-10-30 05:21:20

在 HTML5 中使用 Canvas 绘图时，经常会遇到需要在 Canvas 中显示网络字体的需求，实现方法有多种。本文将介绍几种实现方法，每种方法都有其优劣势。

方法一：使用 Canvas 的 `font` 属性

Canvas 的 font 属性可以用来设置当前画布的字体，其值是一个字符串，包含了字体的名称、大小和样式。如果要显示网络字体，则需要将网络字体文件下载到本地，然后将字体文件的路径设置为 font 属性的值。

// 下载网络字体文件
const fontFileUrl = 'https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2';
fetch(fontFileUrl)
  .then(res => res.arrayBuffer())
  .then(buffer => {
    // 将字体文件添加到文档中
    const blob = new Blob([buffer], { type: 'font/woff2' });
    const fontFace = new FontFace('Roboto', blob);
    fontFace.load().then(() => {
      // 将字体添加到 Canvas 中
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');
      ctx.font = '20px Roboto';
      ctx.fillText('Hello, world!', 10, 50);
    });
  });

方法二：使用 Canvas 的 `drawImage()` 方法

Canvas 的 drawImage() 方法可以用来将图像绘制到 Canvas 上。如果要显示网络字体，则可以先将网络字体渲染成图像，然后使用 drawImage() 方法将图像绘制到 Canvas 上。

// 创建一个新的 Canvas 元素
const fontCanvas = document.createElement('canvas');
const fontCtx = fontCanvas.getContext('2d');

// 设置字体和文本
fontCtx.font = '20px Roboto';
fontCtx.fillText('Hello, world!', 10, 50);

// 将 Canvas 元素转换为图像
const imageData = fontCanvas.toDataURL('image/png');

// 将图像绘制到 Canvas 上
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = () => {
  ctx.drawImage(image, 10, 10);
};
image.src = imageData;

方法三：使用 Canvas 的 `measureText()` 方法

Canvas 的 measureText() 方法可以用来测量文本的宽度和高度。如果要显示网络字体，则可以先使用 measureText() 方法测量文本的宽度和高度，然后根据测量结果来调整文本的位置和大小。

// 创建一个新的 Canvas 元素
const fontCanvas = document.createElement('canvas');
const fontCtx = fontCanvas.getContext('2d');

// 设置字体和文本
fontCtx.font = '20px Roboto';
const textMetrics = fontCtx.measureText('Hello, world!');

// 计算文本的宽度和高度
const textWidth = textMetrics.width;
const textHeight = textMetrics.height;

// 将文本绘制到 Canvas 上
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillText('Hello, world!', 10, 50);

方法四：使用 Canvas 的 `getContext()` 方法

Canvas 的 getContext() 方法可以用来获取 Canvas 的绘图上下文，然后可以使用绘图上下文来绘制文本。如果要显示网络字体，则可以先使用 getContext() 方法获取 Canvas 的绘图上下文，然后使用绘图上下文来绘制文本。

// 获取 Canvas 的绘图上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置字体和文本
ctx.font = '20px Roboto';
ctx.fillText('Hello, world!', 10, 50);