console 命令行工具 X clear

console

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

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);

    var completeNum = 0;
    workerList.forEach(w => {
        w.onmessage(e => {
            console.log(e);
            completeNum++;
            console.log(6666);
            //ctx.drawImage(e.data.img);
        })
        w.postMessage({
            msg: 'run',
            mouseX: mouseX,
            mouseY: mouseY
        })
        
    })
    //console.log( workerList)
    while (completeNum < workerNum) {
        //console.log(completeNum);
    }
    /*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();
}

function Create() {
    for (i = 0; i < workerNum; i++) {
        var workerDotList = [];
        for (j = 0; j < dotsNum / workerNum; j++) {
            var dot = {};
            dots.push(dot);
            workerDotList.push(dot);

            dot.pX = Random(0, 300);
            dot.pY = Random(0, 300);
            dot.vX = 0;
            dot.vY = 0;
            dot.color = colorList[Random(0, colorList.length + 1)];
        }
        var worker = new Worker('http://jsrun.net/Xu5Kp.js');
        //console.log(worker);
        worker.postMessage({
            msg: 'create',
            w: {
                ak: ak,
                dMin: dMin,
                vMax: vMax
            }
        });

    }

}
function Random(a, b) { //包括a，b
    return Math.floor(Math.random() * (b - a + 1)) + a;
}

<body>

    <canvas width="2000px" 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 
    
}

本项目引用的自定义外部资源

Xu5Kp.js