Anillo Eldon

A primera vista, hay un círculo grande en el medio y tres círculos pequeños en la parte superior, izquierda y derecha.

¡Después de observarlo detenidamente durante unos días, descubrí que hay un triángulo equilátero en el medio del círculo! ¡El círculo grande en el medio pasa por los 3 vértices del triángulo, y los 3 círculos pequeños a la izquierda y a la derecha toman los lados del triángulo como diámetros! Usando el radio del gran círculo como parámetro, calcule las coordenadas del centro del círculo y el diámetro del círculo, ¡y podrá dibujar esta figura!

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

Agrega la cabeza, negrita y color.

¡Con algoritmos, también puede usar software 3D para renderizar!

Supongo que te gusta