【JavaScript】canvas 绘图 r=a(1-sinθ)

it表哥

已于 2024-07-15 13:45:58 修改

阅读量433

点赞数 9

文章标签： javascript 前端 html

于 2024-01-10 17:20:41 首次发布

本文链接：https://blog.youkuaiyun.com/zbxinsheng/article/details/135508735

版权

本文介绍了如何利用HTML5的<canvas>元素和JavaScript编写代码，通过数学函数绘制出一个动态变化的小圆点轨迹，展示了基本的2D图形绘制技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div>
			<canvas id="myCanvas" width="600" height="600" style="border: 1px solid blue;"></canvas>
		</div>
	</body>
	<script>
		// r=a(1-sinθ)公式

		// 获取 canvas 元素
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");

		// 绘制坐标轴 横坐标
		ctx.beginPath();
		ctx.moveTo(0, 300);
		ctx.lineTo(900, 300);
		ctx.stroke();

		// 绘制坐标轴 纵坐标
		ctx.beginPath();
		ctx.moveTo(300, 0);
		ctx.lineTo(300, 900);
		ctx.stroke();

		var t0 = 0.1;

		// 弧度
		var t = t0 / 180 * Math.PI;


		// 设置了3600个小圆点
		for (var i = 0; i < 3600; i++) {
			const pointX = -(100 * (2 * Math.sin(t) - Math.sin(2 * t)) - 300)
			const pointY = -(100 * (2 * Math.cos(t) - Math.cos(2 * t)) - 300)
			t0 += 0.1;
			t = t0 / 180 * Math.PI;
			ctx.beginPath();
			ctx.arc(pointX, pointY, 1, 0, Math.PI * 2); // 绘制点  
			ctx.fill();
		}
	</script>
</html>