带有圆形填充文本的jQuery画布动画

Question

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

如何将文字放在这些圆圈上？

我在圆形功能中使用填充文本，但这给了我一个错误。

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = 300;
var mouse = {
x: undefined,
y: undefined
}
window.addEventListener('mousemove', function(e){
mouse.x = e.x;
mouse.y = e.y;
});
window.addEventListener('resize', function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function Circle(){
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 = function(){
c.beginPath();
c.arc(this.x,this.y, this.radius, 0, Math.PI*2, false);
c.strokeStyle = this.color;
c.stroke();
c.fillStyle = this.color;
c.fill();
this.update();
}
this.update = function(){
if(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;
}
this.x += this.xVelocity;
this.y += this.yVelocity;
if(mouse.x - this.x < 50 && mouse.x - this.x > -50 
                && mouse.y - this.y < 50 && mouse.y - this.y > -50){
if(this.radius < 150){
this.radius += 2;
}
}
else if(this.radius !== this.originalSize){
this.radius -= 2;
}
}
}
var circleArray = [];
for(var i = 0; i < 100; i++){
circleArray.push(new Circle());
}
function animate(){
c.clearRect(0,0, innerWidth, innerHeight);
for(var i = 0; i < circleArray.length; i++){
circleArray[i].draw();
}
requestAnimationFrame(animate);
}
animate();

<canvas class="grey darken-4" id="canvas" width="" height="">
</canvas>

Answer 1

希望我理解正确。我添加了一个文本数组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"];
 
var mouse = {
x: undefined,
y: undefined
}
window.addEventListener('mousemove', function(e){
mouse.x = e.x;
mouse.y = e.y;
});
window.addEventListener('resize', function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}



function Circle(){
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 = function(){
c.beginPath();
c.arc(this.x,this.y, this.radius, 0, Math.PI*2, false);
c.strokeStyle = this.color;
c.stroke();
c.fillStyle = this.color;
c.fill();

 
c.textAlign="center";
c.textBaseline="middle";
c.font=(this.radius*.8)+"px Consolas";
c.fillStyle = "blue";
c.fillText(this.text,this.x,this.y);
      
  
this.update();
}
this.update = function(){
if(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;
}
this.x += this.xVelocity;
this.y += this.yVelocity;
if(mouse.x - this.x < 50 && mouse.x - this.x > -50 
                && mouse.y - this.y < 50 && mouse.y - this.y > -50){
if(this.radius < 150){
this.radius += 2;
}
}
else if(this.radius !== this.originalSize){
this.radius -= 2;
}
}
}
var circleArray = [];
for(var i = 0; i < 100; i++){
circleArray.push(new Circle());
}
function animate(){
c.clearRect(0,0, innerWidth, innerHeight);
for(var i = 0; i < circleArray.length; i++){
circleArray[i].draw();
}
requestAnimationFrame(animate);
}
animate();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>