如何创建适配窗口且可调整大小的HTML5 Canvas实现JavaScript旋转弹跳球？

我来帮你把这两段代码完美整合，实现一个能自适应浏览器窗口大小、同时持续弹跳旋转的小球效果。咱们先看整合后的完整代码，再拆解关键的修改点：

<canvas id="myCanvas">
  Your browser does not support the canvas element.
</canvas>

<script>
window.onload = function() {
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var ballRadius = 100;
  // 初始位置设为窗口中心
  var x = window.innerWidth / 2;
  var y = window.innerHeight / 2;
  // 移动速度
  var dx = 2;
  var dy = -2;
  // 旋转角度（实现旋转效果）
  var rotation = 0;

  // 初始化Canvas尺寸
  resizeCanvas();
  // 启动动画
  animate();

  // 窗口 resize 时调整Canvas
  window.addEventListener('resize', resizeCanvas, false);

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    // 可选：如果窗口调整后球的位置超出边界，把它拉回范围内
    x = Math.max(ballRadius, Math.min(x, canvas.width - ballRadius));
    y = Math.max(ballRadius, Math.min(y, canvas.height - ballRadius));
  }

  function animate() {
    // 用requestAnimationFrame替代setInterval，动画更流畅
    requestAnimationFrame(animate);
    
    // 清空Canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 保存当前绘图状态，方便旋转后恢复
    ctx.save();
    // 平移到球的中心位置，作为旋转原点
    ctx.translate(x, y);
    // 增加旋转角度
    rotation += 0.05;
    ctx.rotate(rotation);
    // 绘制球（因为已经平移到中心，所以坐标设为-ballRadius, -ballRadius）
    ctx.beginPath();
    ctx.arc(0, 0, ballRadius, 0, Math.PI * 2);
    ctx.fillStyle = "#9370DB";
    ctx.fill();
    ctx.closePath();
    // 恢复绘图状态
    ctx.restore();

    // 边界碰撞检测（要考虑球的半径，不然球会一半超出边界才反弹）
    if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
      dx = -dx;
    }
    if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
      dy = -dy;
    }

    // 更新球的位置
    x += dx;
    y += dy;
  }
};
</script>

关键修改说明： #

• 统一上下文与状态管理：把两段代码的Canvas获取逻辑合并，避免重复操作DOM，同时统一管理动画和resize的状态
• 自适应边界判断：把原来固定的480和680替换成canvas.width - ballRadius和canvas.height - ballRadius，这样不管窗口怎么变，球碰到边缘就会反弹，而且不会出现球一半超出窗口的情况
• 流畅的动画循环：用requestAnimationFrame替代setInterval，它会根据浏览器的刷新频率自动调整帧率，动画更平滑，还能节省性能
• 添加旋转效果：通过ctx.save()、translate()、rotate()实现球的旋转，满足你提到的“旋转的弹跳球”需求
• resize时的位置修正：窗口大小改变后，如果球的位置超出新的边界，会自动把球拉到合法范围内，避免出现球消失的情况
• 初始尺寸设置：页面加载时就调用resizeCanvas()，保证Canvas一开始就铺满窗口

内容的提问来源于stack exchange，提问作者glittergirl