Question

我一直在研究一个沿着随机方向移动的圆形画布动画，每一秒都会改变方向。我通过使用setInterval重复调用函数来每秒更改速度矢量，同时更改圆的中心位置并使用requestAnimationFrame将其绘制到另一个函数中。结果是一个空画布，我不知道为什么。代码分为以下三个文件：

random_ball.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Random Ball</title>
  <link rel="stylesheet" href="random_ball.css">
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="random_ball.js"></script>
</body>
</html>

random_ball.css

html, body{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
canvas{
  position: absolute;
  width:  50vw;
  height: 50vh;
  top: 25vh;
  left: 25vw;
  border-style: solid;
  margin: 0;
  padding: 0;
}

random_ball.js

const canvas = document.getElementById('canvas')
const bounds = canvas.getBoundingClientRect()
const TWO_PI = 2*Math.Pi
const R = 25
const MAX_Y = bounds.height - R
const MAX_X = bounds.width - R
const ctx = canvas.getContext('2d')

function randomInterval(min, max){
  return Math.random()*(max - min) + min
}

function randomVelocity(){ // velocity is pixels/sec
  VEL.X = randomInterval(-POS.X + R, MAX_X - POS.X)
  VEL.Y = randomInterval(-POS.Y + R, MAX_Y - POS.Y)
  console.log('VEL: ' + JSON.stringify(VEL))
}

var POS = {X: bounds.height/2, Y: bounds.width/2}
var VEL = {X: 0, Y: 0}
var LAST_TIME = window.performance.now()

function drawCircle(color){
  ctx.strokeStyle = color
  ctx.beginPath()
  ctx.moveTo(POS.X, POS.Y)
  ctx.arc(POS.X, POS.Y, R, 0, TWO_PI, true)
  ctx.stroke()
}

function draw(timestamp){
  var dt = (timestamp - LAST_TIME)/1000
  var dx = VEL.X*dt
  var dy = VEL.Y*dt

  drawCircle('#FFFFFF') // erase the old drawing by making it white
  POS.X += dx
  POS.Y += dy
  //console.log('POS: ' + JSON.stringify(POS))
  drawCircle('#000000')
  LAST_TIME = timestamp
  requestAnimationFrame(draw)
}

randomVelocity()
drawCircle('#000000')
setInterval(randomVelocity, 1000) //change velocity every second
requestAnimationFrame(draw)

我怀疑在旧圆圈上画白色意味着图片变化太快，我无法看到它。

Answer 1

您可能希望熟悉JavaScript语法规则，以及可能的JSHint等代码检查器。

您的代码的主要问题是您引用了Math对象的不存在的属性。 Math没有Pi属性。拼写为PI（全部大写）。 JavaScript 对这些事情非常敏感。

下一步：清除画布的更常见做法是使用ctx.clearRect(0, 0, width, height)。这是一个帮助您了解差异的JSFiddle：https://jsfiddle.net/Hatchet/dy2dognp/

为什么我的画布动画不显示？

1 个答案: