我正在尝试编写一个圆圈，该圆圈本身由 12x30 个其他圆圈组成，这些圆圈相互接触(或非常接近)但从不相互重叠。这样一个圆圈的每一行应该代表一个月，每个圆圈代表一天。因此，我还需要完全控制每个生成的元素以进一步操纵它们……
基于此，我正在尝试编写如下例所示的程序。
我做得很粗糙，完全不知道如何编写代码才能执行一次并生成完整形状/生成形状。
我想我应该检查圆圈之间的 minDistance，然后执行一些函数来绘制下一列？
// window.addEventListener("mousemove", draw);
//
// var mouseX;
// var mouseY;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var strokeWidth = 1;
var radius = 60;
var maxCircle = 12;
var size = 10
var maxCircle2 = 12;
var size2 = 20
var radius2 = 95;
var maxCircle3 = 12;
var size3 = 40
var radius3 = 160;
var maxCircle4 = 12;
var size4 = 65
var radius4 = 270;
ctx.translate(canvas.width/2, canvas.height/2);
//Draw January
for (var i = 0; i <= maxCircle; i++) {
ctx.beginPath();
ctx.arc(0, radius, size, -Math.PI/2, 2*Math.PI, false);
ctx.rotate(2*Math.PI/maxCircle);
ctx.stroke();
}
for (var i = 0; i <= maxCircle2; i++) {
ctx.beginPath();
ctx.arc(0, radius2, size2, -Math.PI/2, 2*Math.PI, false);
ctx.rotate(2*Math.PI/maxCircle2);
ctx.stroke();
}
for (var i = 0; i <= maxCircle3; i++) {
ctx.beginPath();
ctx.arc(0, radius3, size3, -Math.PI/2, 2*Math.PI, false);
ctx.rotate(2*Math.PI/maxCircle3);
ctx.stroke();
}
for (var i = 0; i <= maxCircle4; i++) {
ctx.beginPath();
ctx.arc(0, radius4, size4, -Math.PI/2, 2*Math.PI, false);
ctx.rotate(2*Math.PI/maxCircle4);
ctx.stroke();
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="background-color: #fff;">
<canvas id="canvas" width="800" height="500" style="border: 1px solid black;">
</canvas>
<script src="script.js"></script>
</body>
</html>最佳答案
问题:创建一个由 30 个同心环组成的形状。每个环都有 12 个大小相同的圆圈。
需要根据这些约束来选择同心环及其圆的半径:
给定一个环半径
r，必须选择该环上 12 个圆的半径s，以便相邻的圆仅接触但不接触重叠。给定一个环的半径
r，必须选择下一个较大的同心环r'的半径，以便两个环上的圆刚好接触但不要重叠。
插图:同心环和其上的圆以及构成十二边形的圆心之间的连线用相同的颜色绘制:
我们知道十二边形的边 Angular 以 15° 为步长变化。如果我们然后将半径为 s 的圆放置在离中心 r + s 的距离处，我们可以使用公式 s = sin(15°)/(1 - sin(15°)) * r 为给定的半径为 r 的环计算圆半径 s。参见例如https://www.illustrativemathematics.org/content-standards/tasks/710以获得几何解释。
两个环之间的距离等于其圆的直径2 * s。
应用上述公式并预先计算所有涉及的因素得出:
function drawRingsOfCircles(r) {
var RADIUS_FACTOR = 0.34919818620854987;
var ARC_START = -0.5 * Math.PI;
var ARC_END = 2 * Math.PI;
var ROTATE = Math.PI * 0.16666666666666666;
for (var i = 0; i < 30; i++) {
var s = RADIUS_FACTOR * r;
for (var j = 0; j < 12; j++) {
ctx.beginPath();
ctx.arc(0, r + s, s, ARC_START, ARC_END);
ctx.rotate(ROTATE);
ctx.stroke();
}
r = r + s + s;
}
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
drawRingsOfCircles(20);<canvas id="canvas" width="800" height="500"></canvas>关于javascript - 程序生成形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43706884/