如何在画布上高效加载和绘制表情包？
本文介绍了如何在画布上高效加载和绘制表情包？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在html画布上打印表情符号。
它可以使用图像来完成，但它很麻烦。有没有更好的办法？
数据-lang=”js”数据-隐藏=”假”数据-控制台=”真”数据-巴贝尔=”假”>
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>编辑：
好了，我想我的问题被误解了。我可以在画布上画表情符号作为图像。我不想那样做。因为我必须截图所有的表情符号，然后将它们裁剪，然后再打印在画布上，这很麻烦。我正在寻找一种更有效的方法。
推荐答案
您可以使用fillText绘制unicode表情符号。
您可以从emojipedia复制并粘贴表情符号。
我当然不是这方面的专家，所以我不知道这样做是否有很大的缺点，但无论如何都要考虑以下几点。
- 这可能不适用于所有浏览器/操作系统。
- 除非您使用自定义字体，否则标准表情符号在不同的浏览器/系统上看起来可能会不同
- 您应该确保js被读取为UTF-8，这样才能正常工作。这是HTML5的标准配置，因此您可能不必更改任何内容，除非它对您不起作用。
数据-lang=”js”数据-隐藏=”假”数据-控制台=”真”数据-巴贝尔=”假”>
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('