console 命令行工具 X clear

console

const dotsNum = 10000;   //粒子个数
var dots = [];
var mouseX = 0, mouseY = 0;
var ak = 50000;     //引力常数
var vMax = 15; //最大速度
var dMin = 30;  //最小间隔中心距离
var colorList = [ '#FC71AB','#FF8093','#FF9A7B','#FFB869','#FFD863','#F9F871']

Create();
requestAnimationFrame(Update);
document.addEventListener('mousemove', event => {
    mouseX = event.clientX;
    mouseY = event.clientY;
})
var t1 = 0;
function Update() {

    var t2  = Date.now();

    var ctx = document.querySelector('canvas').getContext('2d');
   ctx.clearRect(0,0,1000,1000);
    
    dots.forEach(dot => {
        var rr = (mouseX - dot.pX) * (mouseX - dot.pX) +  //r的平方 
            (mouseY - dot.pY) * (mouseY - dot.pY);
        rr = Math.max(dMin * dMin, rr);
        var aX = ak / (rr * (mouseX - dot.pX) / Math.abs(mouseX - dot.pX));
        var aY = ak / (rr * (mouseY - dot.pY) / Math.abs(mouseY - dot.pY));
        dot.vX += aX;
        dot.vY += aY;
        dot.vX = Math.max(-vMax, Math.min(vMax, dot.vX));
        dot.vY = Math.max(-vMax, Math.min(vMax, dot.vY));
        //console.log(aX+" "+aY + "|| "+dot.vX+'. '+dot.vY)

        dot.pX += dot.vX;
        dot.pY += dot.vY;

        ctx.fillStyle = colorList[Random(0,colorList.length+1)];
        ctx.beginPath();
        ctx.arc(dot.pX,dot.pY, 2, 0, 2 * Math.PI);
        ctx.fill();

    })
    
    requestAnimationFrame(Update);

    //console.log(Date.now()-t2,t2-t1);
    t1 = Date.now();
}
class Dot {
    Dot(x, y) {
        this.pX = x;
        this.pY = y;
    }
    Dot() { }
}
function Create() {
    for (i = 0; i < dotsNum; i++) {
        var dot = {};
        dots.push(dot);

        dot.pX = Random(0, 300);
        dot.pY = Random(0, 300);
        dot.vX = 0;
        dot.vY = 0;
    }
}
function Random(a, b) { //包括a，b
    return Math.floor(Math.random() * (b - a + 1)) + a;
}

<body>

    <canvas width="3000px" height="2000px">
    </canvas>
    
</body>

canas{
    
    border: 3px;
    height: 600px;
    width: 80%;
}
.dot{
    background-color: white;
    width: 2px;
    height: 2px;
    position: absolute;
    //box-shadow: 1px 1px 3px 1px 
    
}