Javascript 如何让画布动画代码处理多个元素？

我有一个加载动画模块，它为我的项目中的一些加载元素设置动画，代码：

const loadingAnimation=（函数（）{
//私有方法
让ctx；
让我们来看看宽度；
函数初始化CANVAS（id）{
const canvas=document.querySelector（id）；
ctx=canvas.getContext（'2d'）；
canvasWidth=$（canvas.outerWidth（）；
}
类装入圆{
构造函数（x、y、r、开始、结束、v、宽度）{
这个.x=x；
这个。y=y；
这个。r=r；
this.color='#A065FF'；
this.start=start；
this.end=end；
this.offset=this.end-this.start；
这个，v=v；
this.vi=this.v；
这个。宽度=宽度；
this.expand=true；
}
渲染（）{
ctx.beginPath（）；
ctx.arc（this.x，this.y，this.r，this.start，this.end，false）；
ctx.strokeStyle=this.color；
ctx.lineWidth=此.width；
ctx.lineCap='圆形'；
ctx.stroke（）；
}
更新（）{
这个。render（）；
if（this.expand）{
this.end=（this.end-this.start.5）？this.start+this.v+2*（（this.end-this.start-this.offset）/（Math.PI*2-this.offset*2））*this.v:this.start；
this.expand=！（this.end-this.start>.5）；
}
this.start+=this.v；
this.end+=this.v；
}
}
函数初始化加载（）{
设circlesArray=[]；
函数addFromClass（n）{
circlesArray=[]；
for（设i=0；i
canvas{边框：1px纯黑；}
这是因为两个画布都访问相同的loadingAnimation对象，所以您需要有两个不同的loadingAnimation对象，并调用loadingAnimation.init方法，这将起作用

更简单的方法->尝试将更多函数实例用作IIFE。
这是因为两个画布都访问相同的loadingAnimation对象，所以您需要有两个不同的loadingAnimation对象并调用loadingAnimation.init方法，这将起作用

更简单的方法->尝试将更多的函数实例用作iLife。
问题在于顶部有两个共享变量

let ctx;
let canvasWidth;

它们只能跟踪一个画布上下文和一个宽度

您需要对您的代码进行一些调整，以便它们不会被共享。如何做到这一点取决于你自己。在
loadingCircle
或闭包之类的地方跟踪它们。例如


const loadingAnimation=（函数（）{
函数初始化CANVAS（id）{
const canvas=document.querySelector（id）；
返回canvas.getContext（'2d'）；
}
//私有方法
类装入圆{
构造函数（x、y、r、开始、结束、v、宽度）{
这个.x=x；
这个。y=y；
这个。r=r；
this.color='#A065FF'；
this.start=start；
this.end=end；
this.offset=this.end-this.start；
这个，v=v；
this.vi=this.v；
这个。宽度=宽度；
this.expand=true；
}
渲染（ctx）{
ctx.beginPath（）；
ctx.arc（this.x，this.y，this.r，this.start，this.end，false）；
ctx.strokeStyle=this.color；
ctx.lineWidth=此.width；
ctx.lineCap='圆形'；
ctx.stroke（）；
}
更新（ctx）{
这个。渲染（ctx）；
if（this.expand）{
this.end=（this.end-this.start.5）？this.start+this.v+2*（（this.end-this.start-this.offset）/（Math.PI*2-this.offset*2））*this.v:this.start；
this.expand=！（this.end-this.start>.5）；
}
this.start+=this.v；
this.end+=this.v；
}
}
函数初始化加载（ctx）{
const canvasWidth=$（ctx.canvas）.outerWidth（）；
设circlesArray=[]；
函数addFromClass（n）{
circlesArray=[]；
for（设i=0；i