最简单的方法在圆圈内随机绘制点 [英] Simplest way to plot points randomly inside a circle

问题描述

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

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

这是我现在有的：

  var ctx = canvas.getContext（'2d'），
 count = 1000，//随机点数
 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（）; 
 
 //创建随机点
 ctx.fillStyle ='#ffffff'; 
 
 while（count）{
 // randomise x：y 
 
 ctx.fillRect（x + canvas.width / 2，y + canvas.height / 2 ，2，2）; 
 count--; 
} 
  

如何生成随机（x，y）坐标来随机绘制点内圈？

我目前的小提琴：

结果截图：

现场演示：
$ b

var canvas = document.getElementById（thecanvas ）; var ctx = canvas.getContext（'2d'），count = 1000，//随机点数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（）; //创建随机pointsctx.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 =400height =400>< / canvas>

$ b

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

I have a basic JSFiddle whereby I want to have random points plotted inside a circle.

But I do not know how to limit the points to be inside the circle.

This is what I currently have:

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

How would i go about generating random (x,y) coordinates to plot random points inside the circle?

My current fiddle: http://jsfiddle.net/e8jqdxp3/

解决方案

To plot points randomly in a circle, you can pick a random value from the radius squared, then square root it, pick a random angle, and convert the polar coordinate to rectangular. The square / square root step ensures that we get a uniform distribution (otherwise most points would be near the center of the circle).

So the formula to plot a random point in the circle is the following, where r' is a random value between 0 and r², and θ is a random value between 0 and 2π:

Screenshot of result:

Live Demo:

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 Version: https://jsfiddle.net/qc735bqw/

这篇关于最简单的方法在圆圈内随机绘制点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！