在画布上添加多个球onclick

<canvas id="myCanvas" width="500" height="500"></canvas>

// 获取Canvas元素
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 定义球的属性
var ballRadius = 10;
var balls = [];

// 监听点击事件
canvas.onclick = function(event) {
  // 获取点击位置的坐标
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;

  // 创建球对象
  var ball = {
    x: x,
    y: y,
    dx: Math.random() * 2 - 1, // 球的水平速度
    dy: Math.random() * 2 - 1, // 球的垂直速度
    color: getRandomColor() // 球的颜色
  };

  // 将球对象添加到数组中
  balls.push(ball);
};

// 绘制球
function drawBall(ball) {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = ball.color;
  ctx.fill();
  ctx.closePath();
}

// 更新球的位置
function updateBall(ball) {
  ball.x += ball.dx;
  ball.y += ball.dy;

  // 碰到画布边界时反弹
  if (ball.x + ball.dx > canvas.width - ballRadius || ball.x + ball.dx < ballRadius) {
    ball.dx = -ball.dx;
  }
  if (ball.y + ball.dy > canvas.height - ballRadius || ball.y + ball.dy < ballRadius) {
    ball.dy = -ball.dy;
  }
}

// 绘制画布上的所有球
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < balls.length; i++) {
    drawBall(balls[i]);
    updateBall(balls[i]);
  }

  requestAnimationFrame(draw);
}

// 生成随机颜色
function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

// 启动绘制循环
draw();