JavaScript 不会从 HTML 输入元素中获取值来绘制动画

Question

我想创建落球的物理模拟。为了获得更多乐趣，我想让用户输入他的落球半径和计数值。如果您要在浏览器上运行此代码，您可以单击“CREATE”按钮来显示具有默认值的动画，并且它会起作用。当我在 html 输入元素中输入球数时，它会识别计数并执行代码并出现动画。当我在 html 输入元素中输入半径值时， Canvas 上没有显示任何内容。我觉得这是一个非常奇怪的问题。我已经尝试过重命名变量和元素 ID 名称。如果有人能提供帮助，我将不胜感激。

名为index.html的html文件

const canvas = document.getElementById('ball-platform');
const createBtn = document.getElementById('createAnimation');
const W = canvas.width;
const H = canvas.height;
const ctx = canvas.getContext('2d');
const gravity = 0.15;
const friction = 0.9;
let balls = [];

function FillCircle(x0, y0, bRadius, theColor) {
  let circle = {
    x: x0,
    y: y0,
    color: theColor
  };
  let xVel = 5,
    yVel = 1;
  this.movement = () => {
    if (Math.round(circle.x + bRadius + xVel) > W || Math.round(circle.x - bRadius + xVel) < 0) {
      xVel = -xVel * friction;
      yVel *= friction;
    } else if (Math.round(circle.y + bRadius + yVel) > H) {
      yVel = -yVel * friction;
      xVel *= friction;
    } else {
      yVel += gravity;
    }
    circle.x += xVel;
    circle.y += yVel;
  }
  this.draw = () => {
    ctx.beginPath();
    ctx.fillStyle = circle.color;
    ctx.ellipse(circle.x, circle.y, bRadius, bRadius, -90 * Math.PI / 180, 360 * Math.PI / 180, false);
    ctx.fill();
    ctx.stroke();
  }
}

createBtn.addEventListener('mousedown', () => {
  balls = [];
  let bRadius = document.getElementById('bRadius').value;
  let count = document.getElementById('count').value;
  if (bRadius == "" || bRadius <= 0) {
    bRadius = 5;
  }
  if (count == "" || count < 0) {
    count = 5;
  }
  initialize(count, bRadius);
});


function initialize(count, bRadius) {
  for (let i = 0; i < count; i++) {
    let xpos = (Math.random() * (W - bRadius - 10)) + bRadius;
    let ypos = (Math.random() * (H - bRadius - 10)) + bRadius;
    balls.push(new FillCircle(xpos, ypos, bRadius, 'red'));
  }
}

function animation() {
  requestAnimationFrame(animation);
  ctx.clearRect(0, 0, W, H);
  for (let a = 0; a < balls.length; a++) {
    let circle = balls[a];
    circle.movement();
    circle.draw();
  }
}
animation();

<nav style='display: block;'>
  <button id='createAnimation'>CREATE</button>
  <input placeholder='Radius' , id='bRadius'>
  <input placeholder='Count' id='count'>
</nav>

<canvas id="ball-platform" width="500" height="500" style="border: 1px solid black"></canvas>

Answer 1

我认为您需要将输入值转换为数字，

const canvas = document.getElementById('ball-platform');
const createBtn = document.getElementById('createAnimation');
const W = canvas.width;
const H = canvas.height;
const ctx = canvas.getContext('2d');
const gravity = 0.15;
const friction = 0.9;
let balls = [];

function FillCircle(x0, y0, bRadius, theColor) {
  let circle = {
    x: x0,
    y: y0,
    color: theColor
  };
  let xVel = 5,
    yVel = 1;
  this.movement = () => {
    if (Math.round(circle.x + bRadius + xVel) > W || Math.round(circle.x - bRadius + xVel) < 0) {
      xVel = -xVel * friction;
      yVel *= friction;
    } else if (Math.round(circle.y + bRadius + yVel) > H) {
      yVel = -yVel * friction;
      xVel *= friction;
    } else {
      yVel += gravity;
    }
    circle.x += xVel;
    circle.y += yVel;
  }
  this.draw = () => {
    ctx.beginPath();
    ctx.fillStyle = circle.color;
    ctx.ellipse(circle.x, circle.y, bRadius, bRadius, -90 * Math.PI / 180, 360 * Math.PI / 180, false);
    ctx.fill();
    ctx.stroke();
  }
}

createBtn.addEventListener('mousedown', () => {
  balls = [];
  let bRadius = parseInt(document.getElementById('bRadius').value);
  let count = parseInt(document.getElementById('count').value);
  if (bRadius == "" || bRadius <= 0) {
    bRadius = 5;
  }
  if (count == "" || count < 0) {
    count = 5;
  }
  initialize(count, bRadius);
});


function initialize(count, bRadius) {
  for (let i = 0; i < count; i++) {
    let xpos = (Math.random() * (W - bRadius - 10)) + bRadius;
    let ypos = (Math.random() * (H - bRadius - 10)) + bRadius;
    balls.push(new FillCircle(xpos, ypos, bRadius, 'red'));
  }
}

function animation() {
  requestAnimationFrame(animation);
  ctx.clearRect(0, 0, W, H);
  for (let a = 0; a < balls.length; a++) {
    let circle = balls[a];
    circle.movement();
    circle.draw();
  }
}
animation();

<nav style='display: block;'>
  <button id='createAnimation'>CREATE</button>
  <input placeholder='Radius' , id='bRadius'>
  <input placeholder='Count' id='count'>
</nav>

<canvas id="ball-platform" width="500" height="500" style="border: 1px solid black"></canvas>