我在用canvas写一个自动生成随意小圆代码,把小球的圆心的位置,半径,颜色存在一个数组里,可是一直运行不了,又没有报错,可不可以帮帮忙找错?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#can1{ border:1px solid #000;}
</style>
<script>
window.onload=function()
{
var cant=document.getElementById('can1');
var can1=cant.getContext('2d');
var setArr=[];
setInterval(function(){
var x=200+Math.ceil(Math.random()*200);
var y=200+Math.ceil(Math.random()*200);
var r=5+Math.ceil(Math.random()*7);
var sX=-2+Math.ceil(Math.random()*4);
var sY=-2+Math.ceil(Math.random()*4);
var red=Math.floor(Math.random()*256);
var green=Math.floor(Math.random()*256);
var blue=Math.floor(Math.random()*256);
var alpha=0.5+Math.random()*0.3;
var bgColor="rgba("+red+","+green+""+blue+","+alpha+")";
var obj={
x:x,
y:y,
r:r,
sX:sX,
sY:sY,
bgColor:bgColor
};
setArr.push(obj);
},30);
setInterval(function(){
can1.clearRect(0,0,cant.width,cant.heigth);
for(var i;i<setArr.length;i++)
{
setArr[i].x+=setArr[i].sX;
setArr[i].y+=setArr[i].sY;
can1.beginPath();
can1.arc(setArr[i].x,setArr[i].y,setArr[i].r,0*Math.PI,2*Math.PI);
can1.fillStyle=setArr[i].bgColor;
can1.fill();
}
},30);
};
</script>
</head>
<body>
<canvas id="can1" width="500" height="500"></canvas>
</body>
</html>
你把for循环放在一个setInterval里面,相当于一次将现有的所有小球都渲染出来,但有个问题,你没有给
i
初始化赋值,所以看不到球。你给i赋值为0就能看到所有小球了