网页JS随机圆形平铺

需要生成大量的大小不一的圆，屏幕到画布，且不覆盖。
直接随机播种+判断覆盖就行。
先看HTML：

<canvas id="canvas" width="800" height="800"
style="border:1px solid #000000;">
</canvas>

再看JS：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var circles = [], min = 5, max = 10;
circles.push({x:400, y:400, r:100})
draw();

function draw() {
    var c = createCircle();
  var counter = 0;
  while(!isValid(c)) {
    c.x = Math.random() * 800;
    c.y = Math.random() * 800;
    counter++;
    if(counter > 10000) {
        return;
    }
  }
  while(isValid(c)) {
    c.r++;
  }
  circles.push(c);
  drawCircle(c);
  requestAnimationFrame(draw);
}

function isValid(c) {
    if(c.r>max) {
    return false;
  }
  for(var i=0; i<circles.length; i++) {
    var c2 = circles[i],
      dx = c2.x-c.x
      dy = c2.y-c.y
      dist = Math.sqrt(dx*dx+dy*dy);
    if(dist<c2.r + c.r + 2){
      return false
    }
  }
  return true;
}

function createCircle() {
    return {
    x: Math.random() * 800,
    y: Math.random() * 800,
    r: min
  }
}

function drawCircle(c) {
    if(c.r > 10) {
    return;
  }
    context.beginPath();
  context.arc(c.x, c.y, c.r, 0, Math.PI * 2);
  context.fill();
}

效果还行，后面会变慢。

image.png

参考管子v=MvZAjkD8-wk。