用canvas画图,一直运行不了。

我在用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>
阅读 3.2k
3 个回答

你把for循环放在一个setInterval里面,相当于一次将现有的所有小球都渲染出来,但有个问题,你没有给i初始化赋值,所以看不到球。你给i赋值为0就能看到所有小球了

把两个定时器的回调方法合并成一个就好了。

你看看这种写法是不是更好

window.onload=function()
{
    var cant=document.getElementById('can1');
    var can1=cant.getContext('2d');
    var time=null;
    create(); 
    function create(){
      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
                };
      clearInterval(time);          
      draw(obj);
    }
    function draw(obj){
      can1.beginPath();
      can1.arc(obj.x,obj.y,obj.r,0*Math.PI,2*Math.PI);
      can1.fillStyle=obj.bgColor;
      can1.fill();
      time = setInterval(function(){
          create();
      },3000)
    }
}     
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题