艾尔登法环

粗一看，中间一个大圆，上左右3个小圆，看不出啥关系。

仔细看了几天，发现圆中间有个等边三角形！中间大圆过三角形的3个顶点，上左右3个小圆以三角形的边为直径！以大圆半径为参数，算出圆心坐标和圆直径，就能画出这个图形了！

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

加上头部，加粗着色。

有了算法，还可以用3D软件来渲染！

猜你喜欢