Canvas 如何使用画布移动表情符号？

我想画多个在画布上移动的表情。最初这段代码使用了

newimage（）

，因为它加载了一个svg文件，但我将它们改为

fillText

。但由于没有图像，因此屏幕上没有显示任何内容。我尝试过使用div，但我认为这不是一个好主意。我不知道如何在不执行

new Image（）

的情况下运行下面的代码。如果你能告诉我怎么做，我将不胜感激

导出默认函数useMojieffect（canvasRef，emoji）{
useffect（（）=>{
const canvas=canvasRef.current；
const context=canvas.getContext（'2d'）；
设emojiContainer=[]；
常量init=（）=>{
请求动画帧（渲染）；
画布宽度=320；
canvas.height=320；
for（设i=0；i<20；i++）{
emojiContainer.push（新的Emoji（））；
}
};
const Emoji=类{
构造函数（）{
this.x=Math.random（）*canvas.width；
this.y=Math.random（）*canvas.height；
this.opacity=Math.random（）*0.5+0.5；
this.vel={
x:（数学随机数（）-0.5）*6，
y:（数学随机数（）-0.5）*6，
};
this.targetScale=Math.random（）*0.8；
this.scale=this.targetScale*Math.random（）+0.5；
}
更新（）{
this.x+=this.vel.x；
this.y+=this.vel.y；
this.scale+=（this.targetScale-this.scale）*0.01；
if（this.x-this.width>canvas.width | | this.x+this.width<0）{
这个比例=0；
this.x=Math.random（）*canvas.width；
}
if（this.y-this.height>canvas.height | | this.y+this.height<0）{
这个比例=0；
this.y=Math.random（）*canvas.height；
}
this.width=480*this.scale；
this.height=400*this.scale；
}
画（）{
context.globalAlpha=this.opacity；
context.font='50px格鲁吉亚'；
context.fillText(
表情符号，
这个.x-这个.width*0.5，
this.y-this.height*0.5，
);
}
};
常量渲染=（）=>{
clearRect（0，0，canvas.width，canvas.height）；
for（设i=0；i<20；i++）{
emojiContainer[i].update（）；
emojiContainer[i].draw（）；
}
请求动画帧（渲染）；
};
//这里！！！
//const heartImage=新图像（480480）；
//heartImage.onload=init；
//heartImage.src='svg文件'；
//const box=document.createElement（'div'）；
//box.style.width='100px'；
//box.style.height='100px'；
//box.onload=init；
//return（）=>{
//window.cancelAnimationFrame（渲染）；
// };
}, []);
}