在圆圈内随机绘制点的最简单方法

Question

我有一个基本的JSFiddle，我希望在圆圈内绘制随机点。

但我不知道如何限制点在圈内。

这就是我目前所拥有的：

var ctx = canvas.getContext('2d'),
    count = 1000, // number of random  points
    cx = 150,
    cy = 150,
    radius = 148;

    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.arc(canvas.width/2, canvas.height/2, radius, 0, 2*Math.PI);
    ctx.closePath();
    ctx.fillStyle = '#00000';
    ctx.fill();

// create random points
    ctx.fillStyle = '#ffffff';

while(count) {
    // randomise x:y

    ctx.fillRect(x + canvas.width/2, y + canvas.height/2, 2, 2);
    count--;
}

如何生成随机（x，y）坐标以绘制圆内的随机点？

我当前的小提琴：http://jsfiddle.net/e8jqdxp3/

Answer 1

要在圆圈中随机绘制点，您可以从radius平方中选择一个随机值，然后选取平方根，选择一个随机角度，并将极坐标转换为矩形。平方/平方根步骤确保我们得到均匀分布（否则大多数点将靠近圆心）。

因此，在圆圈中绘制随机点的公式如下，其中 r' 是 0 和 r ² ， θ 是随机值在 0 和 2π 之间：

结果截图：

现场演示：

var canvas = document.getElementById("thecanvas");

var ctx = canvas.getContext('2d'),
    count = 1000, // number of random  points
    cx = 150,
    cy = 150,
    radius = 148;

ctx.fillStyle = '#CCCCCC';
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#000000';

ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI);
ctx.closePath();

ctx.fill();

// create random points
ctx.fillStyle = '#ffffff';

while (count) {
    var pt_angle = Math.random() * 2 * Math.PI;
    var pt_radius_sq = Math.random() * radius * radius;
    var pt_x = Math.sqrt(pt_radius_sq) * Math.cos(pt_angle);
    var pt_y = Math.sqrt(pt_radius_sq) * Math.sin(pt_angle);
    ctx.fillRect(pt_x + canvas.width / 2, pt_y + canvas.width / 2, 2, 2);
    count--;
}

<canvas id="thecanvas" width="400" height="400"></canvas>

JSFiddle版本：https://jsfiddle.net/qc735bqw/

Answer 2

随机选择dSquared（0..radius ^ 2）和theta（0..2pi），然后

x = sqrt(dSquared) cos(theta)
y = sqrt(dSquared) sin(theta)

Answer 3

JSFiddle

var ctx = canvas.getContext('2d'),
    count = 1000, // number of random  points
    cx = canvas.width/2,
    cy = canvas.height/2,
    radius = 148;

    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.arc(0+canvas.width/2, 0+canvas.height/2, radius, 0, 2*Math.PI);
    ctx.closePath();
    ctx.fillStyle = '#00000';
    ctx.fill();

    ctx.fillStyle = '#ffffff';

while(count) {
    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var xDiff = cx - x;
    var yDiff = cy - y;
    if(Math.sqrt(xDiff*xDiff+yDiff*yDiff)<radius)
    {
        ctx.fillRect(x, y, 2, 2);
        count--;
    }    
}