javascript - 在圆扇区中绘制随机点

标签 javascript canvas html5-canvas

我在 Canvas 上有一个饼图,我想在该饼图的每个部分中绘制随机点。

我已经得到了每个扇区的面积。使用圆弧扇区

var arcsector = Math.PI * (2 * sector / total);
var startAngle = (lastend - offset) * (radius/Math.PI);
var endAngle = (lastend + arcsector - offset) * (radius/Math.PI);
var sectorAngle = arcsector * (radius/Math.PI);
var sectorArea = .5 * (sectorAngle*Math.PI/180) * (radius*radius);

如何在该区域内随机绘制点?

最佳答案

饼图是圆的一部分,根据您的注释,圆从 startAngle 开始,到 endAngle 结束。

获得随机点的最简单方法是建立一个随机 Angular (在 startAngle 和 endAngle)和随机半径,然后你就可以用这些线来表达你的观点了:

 var randAngle  = startAngle + Math.random()*( endAngle - startAngle );
 var randRadius = Math.random()*radius;
 var randX = centerX + randRadius * Math.cos(randAngle);
 var randY = centerY + randRadius * Math.sin(randAngle);
 ctx.fillRect ( randX, randY, 1, 1 ) ;

重复所需的次数!

关于javascript - 在圆扇区中绘制随机点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23430094/

相关文章:

d3.js 的 HTML5 canvas 替代品,图形可视化库

javascript - 为什么 Javascript 中的类变量在尝试多次调用它们或将它们分配给局部变量时会消失?

javascript - 使用 JavaScript/PHP 高效构建 `Delete` 按钮

Javascript Canvas ,在错误的坐标处绘制

python - 继承自 Tkinter.Canvas - 调用 super 会导致错误

html - 将元素添加到 Canvas html5

html5-canvas - 使用 Paper.js 在将鼠标悬停在特定 Canvas 路径上时更改鼠标光标

javascript - 页面中插入后需要运行的Backbone View相关代码放在什么位置

javascript - 如何在不刷新页面的情况下从 DOM 中删除前置/附加元素

javascript - RCTTextField 不是 RCTShadowView 错误的后代