Javascript 当三角形离开画布窗口时，如何设置新的X/Y坐标？

在“瞬间画布”中，创建了15个以不同速度移动的三角形。当其中一个离开画布窗口时：

if(p.x >= W){
p.x = -300;
//Set new y coordinates
}

在那之后，它从一开始就开始了，所以它是一个循环。问题是，三角形从其开始设置的相同y坐标开始。当三角形离开窗口时，我怎么说它应该有新的y坐标呢

    window.onload = function () {

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;

var r = Math.floor(Math.random()*20);

reqAnimFrame = window.requestAnimationFrame ||
               window.mozRequestAnimationFrame    ||
               window.webkitRequestAnimationFrame ||
               window.msRequestAnimationFrame     ||
               window.oRequestAnimationFrame;

var mp = 15; //max particles
var particles = [];
    for(var i = 0; i < mp; i++)
    {
        particles.push({
            x: Math.floor(Math.random()*W), //x-coordinate
            y: Math.floor(Math.random()*H), //y-coordinate
            d: Math.floor(Math.random()*(mp - 1) + 1) //density
        })
        console.log("again");
    }



function animate() {

    reqAnimFrame(animate);
    for(var i = 0; i < mp; i++)
        {
            var p = particles[i];
            p.x += p.d;

            if(p.x >= W){
                p.x = -300;
                //Give the triangle new y coordinates
            }
            draw();
        }

}

function draw() {
    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = "rgba(0,204,142,1";
    ctx.beginPath();
    for(var i = 0; i < mp; i++)
        {
            var p = particles[i];
            ctx.moveTo(p.x,p.y);
            ctx.lineTo(p.x + 150, p.y + (-180));
            ctx.lineTo(p.x + 300, p.y);
        }
    ctx.fill();

}
    animate();
};//onload function

---

要设置三角形离开窗口后的y坐标，只需重用代码p.x=-300；并针对y坐标对其进行自定义

例如：

if(p.x >= W){
    p.x = -300;
    p.y = -300; //Or whatever you want it to be
}

现在，我假设你可能想要一个新的随机y坐标。如果你这样做了，在这里替换p.y=-300；by p.y=数学floorMath.random*H

希望有帮助