如何有效地在画布上加载和绘制表情符号？

Question

我想在 html 画布上打印一个表情符号。

可以使用图像来完成，但是很麻烦。有没有更好的办法？

const canvas = document.querySelector("#canvas");
const contex = canvas.getContext("2d");

var img = new Image();
img.src = "emoji.jpg";
img.addEventListener(
  "load",
  () => {
    context.drawImage(img, 0, 0, 200, 200);
  }
);
img.src = "img.jpg";

#canvas {
  background: red;
}

<canvas id="canvas"></canvas>

编辑：

好吧，我认为我的问题被误解了。我能够在画布上将表情符号绘制为图像。我不想那样做。因为在画布上打印之前我必须对所有表情符号进行截图并裁剪它们，这很麻烦。我正在寻找一种更有效的方法。

Answer 1

您可以fillText用来绘制 unicode 表情符号。

您可以从emojipedia复制和粘贴表情符号。

我当然不是这方面的专家，所以我不知道这样做是否有很大的缺点，但无论如何，这里有一些事情需要考虑。

1. 这可能不适用于所有浏览器/操作系统。
2. 除非您使用自定义字体，否则浏览器/系统之间的标准表情符号可能会有所不同
3. 您应该确保您的 js 被读取为 UTF-8 以使其正常工作。这是 HTML5 的标准，因此您可能不必更改任何内容，除非它对您不起作用。

const canvas = document.querySelector("#canvas");
const contex = canvas.getContext("2d");

// The size of the emoji is set with the font
contex.font = '100px serif'
// use these alignment properties for "better" positioning
contex.textAlign = "center"; 
contex.textBaseline = "middle"; 
// draw the emoji
contex.fillText('', canvas.width / 2, canvas.height / 2)

#canvas {
  background: #ccc;
}

<canvas id="canvas"></canvas>