<!doctype html>
<html lang = 'en'>
<head>
<meta charset="UTF-8">
<title>pinbanyinzhang</title>
<script type = "text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded(){
canvasApp();
}
function canvasApp(){
function drawScreen(){
context.fillStyle = "#EEEEEE";
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
context.strokeStyle = "#000000";
context.strokeRect(1, 1, theCanvas.width-2, theCanvas.height-2);
context.fillStyle = "#000000";
var ball;
for(var i = 0; i < balls.lenght; i++){
ball = balls[i];
ball.x += ball.xunits;
ball.y += ball.yunits;
context.beginPath();
context.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2, true);
context.closePath();
context.fill();
if (ball.x > theCanvas.width || ball.x < 0 ) {
ball.angle = 180 - ball.angle;
updateBall(ball);
}
else if (ball.y > theCanvas.height || ball.y < 0){
ball.angle = 360 - ball.angle;
updateBall(ball);
}
}
}
function updateBall(ball){
ball.radians = ball.angle * Math.PI/ 180;
ball.xunits = Math.cos(ball.radians) * ball.speed;
ball.yunits = Math.sin(ball.radians) * ball.speed;
}
var numBalls = 100;
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;
theCanvas = document.getElementById("canvas");
context = theCanvas.getContext("2d");
for(var i = 0; i < numBalls; i++){
tempRadius = Math.floor(Math.random()*maxSize)+minSize;
tempX = tempRadius*2 + (Math.floor(Math.random()*theCanvas.width)-tempRadius*2);
tempY = tempRadius*2 + (Math.floor(Math.random()*theCanvas.height)-tempRadius*2);
tempSpeed = maxSpeed-tempRadius;
tempAngle = Math.floor(Math.random()*360);
tempRadians = tempAngle * Math.PI/180;
tempXunits = Math.cos(tempRadians)*tempSpeed;
tempYunits = Math.sin(tempRadians)*tempSpeed;
tempBall = {x:tempX,y:tempY,radius:tempRadius, speed:tempSpeed, angle:tempAngle, xunits:tempXunits,yunits:tempYunits}
balls.push(tempBall);
}
function gameLoop(){
window.setTimeout(gameLoop, 20);
drawScreen();
}
gameLoop();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id = "canvas" width ="500" height = "500">
your brow
</canvas>
</div>
</body>
</html>
哪位大神帮我看看这段HTML5代码怎么运行不出来？谢谢
drawScreen方法中，for(var i = 0; i < balls.lenght; i++){ 这句代码有问题，lenght 写错，应该为length 你试试。
温馨提示：答案为网友推荐，仅供参考
