javascript - 如何使用 JS 创建点图

Question

如何创建高密度点图？我已经修改了一些在矩形周围散布点的基本算法，如下所示：

 var createOrangeDots = function () {  
  for (var i = 0; i <=orangeNum; i++) {
    context.beginPath();
    var rand_x = Math.random(i) * horz_max;
    var rand_y = Math.random(i) * vertical_max;
    context.arc(rand_x, rand_y, radius, 1, 2*Math.PI);
    context.fillStyle ="orange";
    context.fill();
    context.closePath();
    }
  }

...创建... 我还帮助找到了在“目标”周围形成点的代码：

var createOrangeDotsCircle = function () {
  for (var i = 0; i <= orangeCircleNum; i++) {
    context.beginPath();
    const dist = (Math.random() ** centripetal) * distFromCenter;
    const angle = Math.random() * Math.PI * 2;
    var rand_x = dist * Math.cos(angle) + centerOrange.x;
    var rand_y = dist * Math.sin(angle) + centerOrange.y;
    context.arc(rand_x, rand_y, radius, 1, 2 * Math.PI);
    context.fillStyle ="orange";
    context.fill();
    context.closePath();
  }  
}
createOrangeDotsCircle();

...产生...

但是我想知道是否有任何 JS 代码可以创建具有不同密度的随机点形状，以至于它实际上可能类似于一个真正的城市隔离图？像这样的东西：

...但仅使用两种颜色且没有地图背景（即仅点）。

我知道这很复杂，所以只需从更有经验的编码人员那里寻找想法/技巧/方向。提前感谢您的帮助。

标签： javascriptgraphicsmaps2ddotspatial