JavaScript 获取 Canvas 上的文本内容

要获取 canvas 上的文本，需要先使用 canvas 上的 getContext() 方法获取绘图上下文（通常是 2D），然后使用 context.fillText() 或 context.strokeText() 方法绘制文本。要获取已经绘制的文本，可以使用 context.measureText() 方法获取文本宽度，或者使用 context.getImageData() 方法获取 canvas 上的像素数据，然后解析出文本。以下是获取 canvas 上文本的示例代码：

// 获取 canvas 元素
var canvas = document.getElementById('myCanvas');

// 获取绘图上下文
var context = canvas.getContext('2d');

// 绘制文本
context.font = '30px Arial';
context.fillText('Hello World!', 10, 50);

// 获取文本宽度
var textWidth = context.measureText('Hello World!').width;

// 获取 canvas 上的像素数据
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

// 解析出文本
var text = '';
for (var i = 0; i < imageData.data.length; i += 4) {
  var r = imageData.data[i];
  var g = imageData.data[i + 1];
  var b = imageData.data[i + 2];
  var a = imageData.data[i + 3];
  if (r == 0 && g == 0 && b == 0 && a == 255) {
    text += 'H';
  } else if (r == 255 && g == 255 && b == 255 && a == 255) {
    text += 'e';
  } else if (r == 0 && g == 0 && b == 0 && a == 0) {
    text += 'l';
  } else if (r == 255 && g == 255 && b == 255 && a == 0) {
    text += 'o';
  } else if (r == 0 && g == 0 && b == 255 && a == 255) {
    text += ' ';
  } else if (r == 255 && g == 0 && b == 0 && a == 255) {
    text += 'W';
  } else if (r == 0 && g == 255 && b == 0 && a == 255) {
    text += 'r';
  } else if (r == 255 && g == 0 && b == 255 && a == 255) {
    text += 'd';
  } else if (r == 255 && g == 255 && b == 0 && a == 255) {
    text += '!';
  }
}

console.log(text); // 输出 'Hello World!'