cavas中的球在动画上留下痕迹，并在画布上透支其他对象

// 创建Canvas元素
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 获取上下文对象
var context = canvas.getContext('2d');

// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 定义球的初始位置和速度
var x = canvas.width / 2;
var y = canvas.height / 2;
var dx = 2;
var dy = -2;

// 绘制球的轨迹
function draw() {
  // 清除画布
  context.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制球的轨迹
  context.globalAlpha = 0.1; // 设置透明度
  context.beginPath();
  context.arc(x, y, 10, 0, Math.PI * 2);
  context.fillStyle = 'red';
  context.fill();

  // 更新球的位置
  x += dx;
  y += dy;

  // 碰撞检测，使球在画布边界反弹
  if (x + dx > canvas.width || x + dx < 0) {
    dx = -dx;
  }
  if (y + dy > canvas.height || y + dy < 0) {
    dy = -dy;
  }

  // 动画循环
  requestAnimationFrame(draw);
}

// 启动动画
draw();