Question

我是HTML5画布的新手并且已经练习了一段时间。

我制作了一个粒子样式画布，其中粒子在y轴上浮动。我只需要弄清楚当一个粒子离开空腔时，它需要再次循环。

这是小提琴，请看看:) 这是我到目前为止所做的事情==

var canvas = document.getElementById('canvas');
        //*****************************************
        //set context
        var ctx = canvas.getContext('2d');    

        //canvas dimensions
        var w = window.innerWidth;
        var h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;

        //*****************************************
        //Lets create an array of particles
        var particles = [];
        for(var i = 0; i < 50; i++)
        {
          //This will add 50 particles to the array with random positions
          particles.push({
            x: Math.random()*w, //x-coordinate
            y: Math.random()*h, //y-coordinate
          })
        }

        //lets create a random particle posiition function
        function randomPosition(){
                this.x = Math.random()*w;
                this.y = Math.random()*h;
        }


        //***************************************** 
        //lets animate the particle
        var x =100; var y=100;
        function draw(){
                  //*****************************************
                  //lets paint the canvas with gradient colors
                  ctx.rect(0,0,w,h);
                  // add linear gradient
                  var grd = ctx.createLinearGradient(0, 0,0, h);
                  // light blue
                  grd.addColorStop(0, '#1695A3');   
                  // dark blue
                  grd.addColorStop(1, '#B5E6D7');
                  ctx.fillStyle = grd;
                  ctx.fill();

                  //Lets draw particles from the array now
                  for(var t = 0; t < particles.length; t++)
                  {
                        var p = particles[t];

                        ctx.beginPath();
                        ctx.fillStyle = "#ACF0F2";
                        ctx.arc(p.x, p.y, 2, Math.PI*2, false);
                        ctx.fill();

                    //p.x++;
                    p.y--;

                    if(p.y < 0){

                          y = Math.random()*h;
                    }

                  }
        }
        //draw();
        setInterval(draw,10);

链接---------------------------------- http://jsfiddle.net/wangel12/cBra2/

Answer 1

给定一个粒子（p），这里是如何测试它是否在画布外移动然后再回收它：

var radius=2;

if( 
    p.x < -radius || 
    p.x > canvas.width+radius ||
    p.y < -radius ||
    p.y > canvas.height+radius
){
    p.x = Math.random()*canvas.width;
    p.y = Math.random()*canvas.height;
}

循环画布动画坐标

1 个答案: