Eldon Ring

At first glance, there is a big circle in the middle, and three small circles on the top, left, and right.

After watching it carefully for a few days, I found that there is an equilateral triangle in the middle of the circle! The big circle in the middle passes through the 3 vertices of the triangle, and the 3 small circles on the left and right take the sides of the triangle as diameters! Using the radius of the great circle as a parameter, calculate the coordinates of the center of the circle and the diameter of the circle, and you can draw this figure!

<html>
<head>
<title>艾尔登法环</title>
<style>
canvas { border:1px solid gray; }
</style>
</head>
<body>
<input id="checkbox" type="checkbox">辅助线<br>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
var checkbox = document.getElementById("checkbox");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var r = 120;
var ox0 = w/2;
var oy0 = h/2;
var ox3, oy3;

function auxiliary() {
	 //XY轴
	 ctx.beginPath();
	 ctx.moveTo(0, oy0);
	 ctx.lineTo(w, oy0);
 	 ctx.moveTo(ox0, 0);
	 ctx.lineTo(ox0, h);
	 ctx.stroke();
	 
	 //等边三角形
	 ctx.setLineDash([5]);
	 var x23 = r * Math.cos(Math.PI/6);
	 var y23 = r * Math.sin(Math.PI/6);
	 var x24 = -x23;
	 var y24 = y23;
	 var x34 = 0;
	 var y34 = r;
	 ctx.beginPath();
	 ctx.moveTo(ox0 + x24, oy0 - y24);
	 ctx.lineTo(ox0 + x23, oy0 - y23);
	 ctx.lineTo(ox0 + x34, oy0 + y34);
	 ctx.closePath();
	 ctx.stroke();
	 
	 ctx.beginPath();	 
	 ctx.moveTo(ox0, oy0);
	 ctx.lineTo(ox0 + x23, oy0 - y23);
	 ctx.moveTo(ox0, oy0);
	 ctx.lineTo(ox0 + ox3, oy0 + oy3);
	 ctx.stroke();
	 
	 //文字
	 ctx.fillStyle = "#000000";
	 ctx.font="30px Verdana";
	 ctx.fillText("2", ox0, oy0 - 1.3*r);
	 ctx.fillText("3", ox0 + r, oy0 + r);
	 ctx.fillText("4", ox0 - r, oy0 + r);
}

function draw() {	 
	 ctx.setLineDash([]);
	 if (checkbox.checked == true) {
	 	  ctx.fillStyle = "#ffffff";
	 	  ctx.lineWidth = 1;
	 	  ctx.strokeStyle = "#000000";  
	 } else {
	 	  ctx.lineWidth = 5;
		  ctx.strokeStyle = "#ffff00";
	 }
	 ctx.fillRect(0, 0, w, h);
	 
	 ctx.beginPath();
	 ctx.arc(ox0, oy0, r, 0, 2 * Math.PI);
	 ctx.stroke();
	 var oy2 = r * Math.cos(Math.PI/3);
	 var r2 = r * Math.sin(Math.PI/3);
 	 ctx.beginPath();
 	 ctx.arc(ox0, oy0 - oy2, r2, 0, 2 * Math.PI);
	 ctx.stroke();
	 var o1o3 = r * Math.sin(Math.PI/6);
	 ox3 = o1o3 * Math.cos(Math.PI/6);
	 oy3 = o1o3 * Math.sin(Math.PI/6);
 	 ctx.beginPath();
 	 ctx.arc(ox0 + ox3, oy0 + oy3, r2, 0, 2 * Math.PI);
	 ctx.stroke();
	 ctx.beginPath();
 	 ctx.arc(ox0 - ox3, oy0 + oy3, r2, 0, 2 * Math.PI);
	 ctx.stroke();
	 
	 //辅助线
	 if (checkbox.checked == true) {
	 	  auxiliary();
	 } else {
	 	 //头部
		 ctx.beginPath();
		 ctx.arc(ox0, oy0 - 4*r, 2*r, Math.PI/3, Math.PI - Math.PI/3);
		 ctx.moveTo(ox0, oy0 - 2*r);
		 ctx.lineTo(ox0, oy0 + 1.5*r);
		 ctx.stroke();	 
	 }
}

draw();
checkbox.onclick = function() { draw(); }
</script>
</body>
</html>

Add the head, bold and color.

With algorithms, you can also use 3D software to render!

Guess you like