如何在画布上高效加载和绘制表情包？ [英] How to load and draw emojis on canvas efficiently?

问题描述

我想在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复制并粘贴表情符号。

我当然不是这方面的专家，所以我不知道这样做是否有很大的缺点，但无论如何都要考虑以下几点。

1. 这可能不适用于所有浏览器/操作系统。
2. 除非您使用自定义字体，否则标准表情符号在不同的浏览器/系统上看起来可能会不同
3. 您应该确保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('😜😂😍', canvas.width / 2, canvas.height / 2)

#canvas {
  background: #ccc;
}

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

这篇关于如何在画布上高效加载和绘制表情包？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！