js使用canvas绘制螺旋形状代码详解 -六月初技术站

js使用canvas绘制螺旋形状代码详解

六月初 JavaScipt 2024-04-25 23:47:02

canvas螺旋形状常见于生活中方方面面，如此常见的效果那么如果使用代码可以如何实现呢？

本篇文章介绍基于canvas绘制螺旋形状图案代码详解：

canvas绘制螺旋形状

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="mycanvas" width="200" height="200"></canvas>
		<script type="text/javascript">
			window.onload = function() {
				var canvas = document.getElementById("mycanvas");
				var context = canvas.getContext("2d");
				var radius = 0;
				var angle = 0;
				context.lineWidth = 2;
				context.strokeStyle = "#0096FF"; // blue-ish color 
				context.beginPath();
				context.moveTo(canvas.width / 2, canvas.height / 2);
				for (var n = 0; n < 240; n++) {
					radius += 0.25;
					angle += (Math.PI * 2) / 80; //每80次迭代一个完整圆周
					var x = canvas.width / 2 + radius * Math.cos(angle);
					var y = canvas.height / 2 + radius * Math.sin(angle);
					context.lineTo(x, y);
				}
				context.stroke();
			};
		</script>
	</body>
</html>