Javascript 为什么'；我的画布动画秀？
我一直在制作一个画布上的圆形动画，该圆形沿随机方向移动，并且每秒钟方向都会发生变化。我通过每秒更改一个速度向量来实现这一点，方法是使用Javascript 为什么'；我的画布动画秀？,javascript,css,html,canvas,Javascript,Css,Html,Canvas,我一直在制作一个画布上的圆形动画，该圆形沿随机方向移动，并且每秒钟方向都会发生变化。我通过每秒更改一个速度向量来实现这一点，方法是使用setInterval反复调用一个函数，同时更改圆的中心位置，并使用requestAnimationFrame在另一个函数中绘制圆。结果是一个空画布，我不知道为什么。代码分为以下三个文件： random_ball.html <!DOCTYPE html> <html> <head> <meta charset="utf
setIntervalrequestAnimationFrame<!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>
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;
}
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)
我怀疑在旧圆圈上画白色意味着图片变化太快，我看不到它。您可能需要熟悉JavaScript语法规则，可能还需要熟悉JSHint之类的代码检查器 代码的主要问题是引用的是
MathPiPI下一步：清除画布的一种更常见的做法是使用
ctx.clearRect（0，0，width，height）