网站首页 > 知识剖析正文

Javascript图形(一):阿基米德螺线

nixiaole 2025-01-05 19:29:56 知识剖析 26 ℃

阿基米德螺旋是以公元前 3 世纪希腊数学家阿基米德命名的螺旋。

阿基米德螺线亦称“等速螺线”。

它是一个轨迹，是当一点P沿动射线OP以等速率运动的同时，该射线又以等角速度绕点O旋转，点P的轨迹称为“阿基米德螺线”。

阿基米德螺线在生活中，有很多的实际应用。比如，螺旋天线，蚊香。

javascript实现阿基米德螺线：

<body onload='draw()'>

<canvas id="myCanvas" width="500" height="500"></canvas>

<script type="text/javascript">

	function draw() {
	 
		var canvas=document.getElementById("myCanvas");
		var context=canvas.getContext('2d');
		context.fillStyle="#EEEEEE";
		context.fillRect(0,0,500,500);
		context.strokeStyle="red";
		context.lineWidth=2;
		
		//初始化一个角度
		var angle = Math.PI/32;
		context.beginPath();
		context.moveTo(250,250);
		
		for (var i=1;i<=256;i++)
		{
			x = 250+5*i*angle*Math.sin(i*angle);
			y = 250+5*i*angle*Math.cos(i*angle);
			context.lineTo(x,y);
		}

     		context.stroke();
	}

</script>

</body>

运行后如图：

改变其中的参数，会产生很多不同的图形，有的看起来并不是曲线。

比如改变角度为Math.PI/4和Math.PI/2时，图形是：

网站首页 > 知识剖析 正文

Javascript图形(一):阿基米德螺线

猜你喜欢

网站首页 > 知识剖析正文