如何实现小球在Canvas画布边缘的水平方向反弹效果

问题原因 #

• 你注释的水平逻辑用到了xPos、xVel两个变量，但是没有提前初始化定义，运行时会抛出变量未定义的报错，打断动画循环，所以出现卡顿
• 你当前绘制小球的ctx.arc()方法第一个参数写死为固定值70，就算定义了水平位置变量，小球的水平位置也不会变化

修复步骤 #

1. 新增水平方向的位置、速度变量初始化
2. 将ctx.arc()的第一个参数替换为水平位置变量xPos
3. 取消水平位置更新、边界碰撞逻辑的注释，根据你的需求调整边界判断的数值即可
   • 如果你需要小球在整个300px宽度的画布边缘反弹，可以将水平边界判断值改为<7（左边界，减去小球半径7px）和>293（右边界，画布宽度减小球半径）
   • 你原来注释的100、200的判断逻辑，会让小球仅在水平方向100px到200px的区间内移动

完整可运行代码 #

JS代码

// 获取canvas元素
var canvas = document.getElementById("canvas-for-ball");
var ctx = canvas.getContext("2d");

// 垂直方向参数
var yPos = 10;
var yVel = 2;
// 新增水平方向参数
var xPos = 70;
var xVel = 2;

function repeatme() {
  ctx.clearRect(0, 0, 300, 300)

  // 绘制小球，第一个参数改为xPos
  ctx.beginPath();
  ctx.arc(xPos, yPos, 7, 0, 2 * Math.PI);
  ctx.stroke();

  // 更新位置
  yPos += yVel;
  xPos += xVel;

  // 垂直边界判断
  if (yPos > 290)
    yVel *= -1;
  if (yPos < 10)
    yVel *= -1;

  // 水平边界判断，这里示例是整个画布边缘反弹，需要限定区间可以改回100、200
  if (xPos > 293)
    xVel *= -1;
  if (xPos < 7)
    xVel *= -1;

  window.requestAnimationFrame(repeatme);
}

repeatme();

CSS代码

body {
  background-color: white;
}

HTML代码

<h1>Akeem Jokosenumi</h1>
<canvas id="canvas-for-ball" width="300" height="300" style="border:1px solid"></canvas>

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