canvas绘制地球围绕太阳转、月球围绕地球转

℡啨天丶

已于 2022-08-08 12:53:18 修改

阅读量642

点赞数 3

CC 4.0 BY-SA版权

分类专栏： HTML5必拿下文章标签： javascript 前端 html

于 2022-08-08 12:53:00 首次发布

本文链接：https://blog.youkuaiyun.com/m0_65037325/article/details/126225444

该博客介绍了如何使用HTML5的canvas元素结合JavaScript来创建一个动画，模拟地球围绕太阳旋转，月球围绕地球旋转的天文现象。内容包括素材准备和代码实现，强调原创，并鼓励读者提问和交流。

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

素材（放到img中，与html同级）:
太阳

地球

月亮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background-color: #99CCFF;
			}

			#canvas {
				background-color: #fff;
				color: rgba(255, 0, 0, 1);
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;

			}
		</style>
	</head>
	<body>
		<canvas id="canvas">
			您的浏览器不支持，canvas标签
		</canvas>
		<script type="text/javascript">
			// 获取画布
			var canvas = do