如何将文本添加到canvas中的弹性碰撞？

// 创建Canvas元素
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

// 设置Canvas尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 定义文本对象
var text = {
  content: "Hello",
  x: canvas.width / 2,
  y: canvas.height / 2,
  vx: 2,
  vy: 1,
  ax: 0,
  ay: 0.1
};

// 更新文本对象的位置和速度
function updateText() {
  text.x += text.vx;
  text.y += text.vy;
  text.vx += text.ax;
  text.vy += text.ay;
  
  // 检测边界碰撞
  if (text.x < 0 || text.x > canvas.width) {
    text.vx *= -1;
  }
  if (text.y < 0 || text.y > canvas.height) {
    text.vy *= -1;
  }
}

// 绘制文本对象
function drawText() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(text.content, text.x, text.y);
}

// 动画循环
function animate() {
  updateText();
  drawText();
  requestAnimationFrame(animate);
}

// 开始动画
animate();