我想在 html Canvas 上打印一个表情符号。
可以使用图像来完成,但是很麻烦。有没有更好的办法?
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>
编辑:
好吧,我认为我的问题被误解了。我能够在 Canvas 上将表情符号绘制为图像。我不想那样做。因为在 Canvas 上打印之前我必须对所有表情符号进行截图并裁剪它们,这很麻烦。我正在寻找一种更有效的方法。
最佳答案
您可以使用 fillText
绘制 unicode 表情符号。
您可以从 emojipedia 复制和粘贴表情符号。
我当然不是这方面的专家,所以我不知道这样做是否有很大的缺点,但无论如何,这里有一些事情需要考虑。
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>
关于html - 如何有效地在 Canvas 上加载和绘制表情符号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56312457/