我正在编写一个面向对象的小样式javasscript演示 - 只是为了绘制一堆在屏幕上移动的球。没什么特别的，没有碰撞检测或此时的任何东西。假设我的Ball.js课程很好，可以安全地使用它。
我的问题相当于：我应该在哪里调用ball.draw（上下文）？以我设置它的方式将球拉到屏幕上的唯一方法似乎是将调用置于generateBalls（）中。但这意味着每个球只被抽一次。
所以，如果有人能在这里指出我的方式错误，那么我真的很感激。这不是功课 - 只是试图更好地处理javascript和画布。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="ball.js"></script>
<script src="utils.js"></script>
...
<canvas id="canvas" width="600" height="480"></canvas>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport() {
return true;
}
function canvasApp() {
if(!canvasSupport()) {
return;
}
}
console.log("app entered");
var numBalls = 45;
//var numBalls = demo.numberofballs.value;
var maxSize = 8;
var minSize = 5;
var maxSpeed = maxSize + 5;
var balls = new Array();
var tempBall;
var tempX;
var tempY;
var tempSpeed;
var tempAngle;
var tempRadius;
var tempRadians;
var tempXunits;
var tempYunits;
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
generateBalls();
setInterval(drawScreen, 33);
function generateBalls() {
console.log("Make some balls");
for(var index = 0; index < numBalls; index++) {
var tempRadius = Math.floor(Math.random()*maxSize)+minSize;
var ball = new Ball(tempRadius, "#000000");
ball.x = tempRadius * 2 + (Math.floor(Math.random()*canvas.width) - tempRadius * 2);
ball.y = tempRadius * 2 + (Math.floor(Math.random()*canvas.height) - tempRadius * 2);
ball.speed = maxSpeed - tempRadius;
ball.angle = Math.floor(Math.random()*360);
ball.dx = Math.cos(tempRadians) * tempSpeed;
ball.dy = Math.sin(tempRadians) * tempSpeed;
// here outputted balls but a stupid place to put it LOL
balls.push(ball);
}
}
function drawScreen() {
console.log("draw screen");
// loop through all balls and adjust their position
// a BallManager could do this more cleanly
for(var index = 0; index < balls.length; index++) {
context.fillStyle="#EE00EE";
context.fillRect(0,0,canvas.width, canvas.height);
// Box
context.strokeStyle = "#ff0043";
context.strokeRect(1,1,canvas.width-2, canvas.height-2);
// place balls
context.fillStyle = "#ff8783";
console.log("ball mover loop in drawscreen");
// no var ball now
ball = balls[index];
ball.x += ball.dx;
ball.y += ball.dy;
ball.draw(context);
//checkBoundaries(balls[index]);
if(ball.x > canvas.width || ball.x < 0) {
ball.angle = 180 - ball.angle;
updateBall(ball);
} else if(ball.y > canvas.height || ball.y < 0) {
ball.angle = 360 - ball.angle;
updateBall(ball);
//ball.draw(context);
}
}
}
//function checkBoundaries(ball) {
//console.log("Check Bounds: " + " " + "ball.x: " + ball.x + " " + //"ball.y: " + ball.y);
//}
function updateBall(ball) {
ball.radians = ball.angle * Math.PI / 180;
ball.dx = Math.cos(ball.radians) * ball.speed;
ball.dy = Math.sin(ball.radians) * ball.speed;
//ball.draw(context);
}
</script>
</body>
</html>
感谢您的建议， 马克
答案 0 :(得分：2)
您的示例包含多个错误，请检查修改后的代码。它有效，但您必须扩展并纠正它。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
// next lines is a Ball() implementation code
Ball = function(radius,color) {
this.radius=radius;
this.color=color;
};
Ball.prototype.x=0;
Ball.prototype.y=0;
Ball.prototype.speed=0;
Ball.prototype.angle=0;
Ball.prototype.dx=0;
Ball.prototype.dy=0;
Ball.prototype.radius=10;
Ball.prototype.color="#000";
Ball.prototype.draw=function() {
context.beginPath();
context.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
context.lineWidth = 5;
context.strokeStyle = this.color; // line color
context.stroke();
context.closePath();
};
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
//console.log("app entered");
window.canvas = document.getElementById("canvas");
window.context = canvas.getContext("2d");
generateBalls();
// if you want to use setInterval() instead replace next line
setTimeout(drawScreen, 33);
}
function canvasSupport() {
return true;
}
function canvasApp() {
if(!canvasSupport()) {
return;
}
}
var numBalls = 45;
//var numBalls = demo.numberofballs.value;
var maxSize = 8;
var minSize = 5;
var maxSpeed = maxSize + 5;
var balls = new Array();
var tempBall;
var tempX;
var tempY;
var tempSpeed;
var tempAngle;
var tempRadius;
var tempRadians;
var tempXunits;
var tempYunits;
function generateBalls() {
//console.log("Make some balls");
for(var index = 0; index < numBalls; index++) {
var tempRadius = Math.floor(Math.random()*maxSize)+minSize;
var tempRadians = Math.random()*Math.PI;
var tempSpeed = 10;
var ball = new Ball(tempRadius, "#000000");
ball.x = tempRadius * 2 + (Math.floor(Math.random()*canvas.width) - tempRadius * 2);
ball.y = tempRadius * 2 + (Math.floor(Math.random()*canvas.height) - tempRadius * 2);
ball.speed = maxSpeed - tempRadius;
ball.angle = Math.floor(Math.random()*360);
ball.dx = Math.cos(tempRadians) * tempSpeed;
ball.dy = Math.sin(tempRadians) * tempSpeed;
// here outputted balls but a stupid place to put it LOL
balls.push(ball);
}
}
function drawScreen() {
console.log("draw screen");
context.fillStyle="#EE00EE";
context.fillRect(0,0,canvas.width, canvas.height);
// Box
context.strokeStyle = "#ff0043";
context.strokeRect(1,1,canvas.width-2, canvas.height-2);
// loop through all balls and adjust their position
// a BallManager could do this more cleanly
for(var index = 0; index < balls.length; index++) {
// place balls
context.fillStyle = "#008700";
//console.log("ball mover loop in drawscreen");
// no var ball now
ball = balls[index];
ball.x += ball.dx;
ball.y += ball.dy;
ball.draw(context);
//checkBoundaries(balls[index]);
if(ball.x > canvas.width || ball.x < 0) {
ball.angle = 180 - ball.angle;
updateBall(ball);
} else if(ball.y > canvas.height || ball.y < 0) {
ball.angle = 360 - ball.angle;
updateBall(ball);
//ball.draw(context);
}
}
// if you want to use setInterval() instead remove next line
setTimeout(drawScreen, 33);
}
//function checkBoundaries(ball) {
//console.log("Check Bounds: " + " " + "ball.x: " + ball.x + " " + //"ball.y: " + ball.y);
//}
function updateBall(ball) {
ball.radians = ball.angle * Math.PI / 180;
ball.dx = Math.cos(ball.radians) * ball.speed;
ball.dy = Math.sin(ball.radians) * ball.speed;
//ball.draw(context);
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="480" style="background:red;"></canvas>
</body>
</html>
答案 1 :(得分：1)
只是为了给那些到达这里的画布新人添加一些更新而给线程添加一些新内容：
斯坦建议创建一个函数来在代码中的一个位置绘制每个球;这有很多原因，它使动画更流畅，代码更容易调试/维护。
然而，当谈到使用setInterval来触发这个时，我不同意Stan的说法......尽管如此，当Stan写这篇文章时，这可能是很常见的做法。
但是，现在我们使用requestAnimationFrame。
这将使您的绘画与浏览器的其余部分同步。
这使得您的代码运行得更快，因为每次浏览器绘制内容时，它都必须再次遍历整个页面以确定所有内容的去向，以防万一移动。
使用setInterval不能保证何时触发，当然也不会与浏览器的屏幕刷新时间一致。
这意味着它正在绘制一点，重新配置页面，绘制更多，重新配置，再绘制一些......以及一次又一次。这非常糟糕，而且很慢。
然而，使用requestAnimationFrame，浏览器无论何时即将重绘屏幕都可以调用您的函数...这意味着只需重新绘制一次，并进行单次刷新。
更快，更清洁。
它的工作方式略有不同，但实际上非常简单。
requestAnimationFrame(redraw);
这会将您的函数'redraw'注册到requestAnimationFrame，以便下次浏览器重新绘制窗口时，您的函数将被调用。
这个问题就是它只会调用你的函数ONCE ......就这样，它就像一个setTimeout而不是setInterval。
这样，你不需要传递timer变量来停止动画;它会因为停止被叫而停止。
但是，要确保动画继续运行，只需将相同的调用放在重绘函数的底部：
function redraw()
{
var blah, blahblah;
...
requestAnimationFrame(redraw);
}
你也可以有条件地设置，运行动画直到完成，然后停止：
function redraw()
{
...
if (!finished) requestAnimationFrame(redraw);
}