Javascript 使用文本填充圆圈的jquery画布动画

我正在尝试使用jquery和html编写一个气泡动画代码，以使我的圆圈在画布中移动，文本应根据圆圈大小调整大小

我怎样才能把文字放在这些圆圈上

我在圆函数中使用填充文本，但这给了我一个错误

var canvas=document.getElementById（'canvas'）；
var c=canvas.getContext（'2d'）；
canvas.width=window.innerWidth；
帆布高度=300；
变量鼠标={
x:未定义，
y:未定义
}
window.addEventListener（'mousemove'，函数（e）{
鼠标x=e.x；
小鼠y=e.y；
});
addEventListener（'resize'，function（））{
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
});
函数getRandomInt（最大值）{
返回Math.floor（Math.random（）*Math.floor（max））；
}
函数圆（）{
this.radius=getRandomInt（30）；
this.originalSize=this.radius；
this.x=Math.random（）*（innerWidth-this.radius*2）+this.radius；
this.y=Math.random（）*（innerHeight-this.radius*2）+this.radius；
this.gradient=Math.random（）；
this.color='rgba（'+getRandomInt（255）+'、'+getRandomInt（255）+'、'+getRandomInt（255）+'、'+this.gradient++'）；
this.xVelocity=5*（Math.random（）-Math.random（））；
this.yVelocity=5*（Math.random（）-Math.random（））；
this.draw=函数（）{
c、 beginPath（）；
c、 弧（this.x，this.y，this.radius，0，Math.PI*2，false）；
c、 strokeStyle=this.color；
c、 笔划（）；
c、 fillStyle=this.color；
c、 填充（）；
这个.update（）；
}
this.update=函数（）{
如果（this.x+this.radius>innerWidth | | this.x-this.radius<0）{
this.xVelocity=-this.xVelocity；
}
if（this.y+this.radius>innerHeight | | this.y-this.radius<0）{
this.yVelocity=-this.yVelocity；
}
这个.x+=这个.x速度；
this.y+=this.yVelocity；
如果（mouse.x-this.x<50&&mouse.x-this.x>-50
&&mouse.y-this.y<50&&mouse.y-this.y>-50）{
如果（该半径小于150）{
这个半径+=2；
}
}
else if（this.radius！==this.originalSize）{
这个半径-=2；
}
}
}
var circleArray=[]；
对于（变量i=0；i<100；i++）{
circleArray.push（新圆圈（））；
}
函数animate（）{
c、 clearRect（0,0，innerWidth，innerHeight）；
对于（var i=0；i
我希望我理解正确。我添加了一个文本数组
var textRy=[“C”，“C++”，“JS”，“java”]和圆现在有this.text属性。为了编写文本，我在this.draw方法中添加了几行，但您可以将它们全部放在一个单独的函数中。我已经确定了相对于
this.radius
的文本大小


var canvas=document.getElementById（'canvas'）；
var c=canvas.getContext（'2d'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight//300;
var textRy=[“C”、“C++”、“JS”、“java”]；
变量鼠标={
x:未定义，
y:未定义
}
window.addEventListener（'mousemove'，函数（e）{
鼠标x=e.x；
小鼠y=e.y；
});
addEventListener（'resize'，function（））{
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
});
函数getRandomInt（最大值）{
返回Math.floor（Math.random（）*Math.floor（max））；
}
函数圆（）{
this.radius=getRandomInt（30）；
this.originalSize=this.radius；
this.x=Math.random（）*（innerWidth-this.radius*2）+this.radius；
this.y=Math.random（）*（innerHeight-this.radius*2）+this.radius；
this.text=textRy[~（Math.random（）*textRy.length）]；
this.gradient=Math.random（）；
this.color='rgba（'+getRandomInt（255）+'、'+getRandomInt（255）+'、'+getRandomInt（255）+'、'+this.gradient++'）；
this.xVelocity=5*（Math.random（）-Math.random（））；
this.yVelocity=5*（Math.random（）-Math.random（））；
this.draw=函数（）{
c、 beginPath（）；
c、 弧（this.x，this.y，this.radius，0，Math.PI*2，false）；
c、 strokeStyle=this.color；
c、 笔划（）；
c、 fillStyle=this.color；
c、 填充（）；
c、 textAlign=“中心”；
c、 textBaseline=“中间”；
c、 font=（this.radius*.8）+“px控制台”；
c、 fillStyle=“蓝色”；
c、 fillText（this.text，this.x，this.y）；
这个.update（）；
}
this.update=函数（）{
如果（this.x+this.radius>innerWidth | | this.x-this.radius<0）{
this.xVelocity=-this.xVelocity；
}
if（this.y+this.radius>innerHeight | | this.y-this.radius<0）{
this.yVelocity=-this.yVelocity；
}
这个.x+=这个.x速度；
this.y+=this.yVelocity；
如果（mouse.x-this.x<50&&mouse.x-this.x>-50
&&mouse.y-this.y<50&&mouse.y-this.y>-50）{
如果（该半径小于150）{
这个半径+=2；
}
}
else if（this.radius！==this.originalSize）{
这个半径-=2；
}
}
}
var circleArray=[]；
对于（变量i=0；i<100；i++）{
circleArray.push（新圆圈（））；
}
函数animate（）{
c、 clearRect（0,0，innerWidth，innerHeight）；
对于（var i=0；i