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

已于 2022-08-08 12:53:18 修改
阅读量530 收藏 3
点赞数 3
分类专栏： HTML5必拿下 文章标签： javascript 前端 html
于 2022-08-08 12:53:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65037325/article/details/126225444
版权
制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！
摘要由CSDN通过智能技术生成

素材（放到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&g
最低0.47元/天 解锁文章
℡啨天丶
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html写一个3d地球特效,html5 canvas+three.js绘制3D地球自转动画特效
weixin_30616309的博客
06-04 4300
html5 canvas+three.js绘制3D地球自转动画特效，挺逼真的效果，支持鼠标拖动地球全方位旋转。查看演示下载资源：37次 下载资源下载积分：20积分js代码 var canvasBox = document.getElementById("canvasBox")var W = canvasBox.clientWidthvar...
canvas 模拟地球绕太阳转动 月球绕地球转动
24K丿丑男的博客
10-29 5407
requestAnimationFrame，Web中写动画的另一种选择HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了:你可以用CSS3的animattion+keyframes;你也可以用css3的transition;你还可以用通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现;当然最原始的你还可以使用window.setTimout()或者w
超炫酷HTML5 Canvas 3D旋转地球动画DEMO演示
02-28
1、html5 2、地球旋转 3、canvas
JavaScript+canvas实现一个旋转的3D球动画效果
最新发布
hjd2018的博客
11-22 2260
JavaScript+canvas实现一个旋转的3D球动画效果
超炫酷HTML5 Canvas 3D旋转地球动画
08-23
这是一款基于HTML5 Canvas的3D地球模拟动画，动画以太空作为背景，地球在太空中旋转，同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们也可以通过点击全屏按钮来全屏观看地球旋转动画，记得在很早以前我们也分享过一款基于HTML5 Canvas的地球动画，请看这里。
html5 canvas绘制3D地球旋转动画特效
09-08
在这个“html5 canvas绘制3D地球旋转动画特效”中，我们将深入探讨如何利用HTML5 Canvas API来创建一个逼真的3D地球模型，并实现其旋转的动画效果。 首先，我们需要理解Canvas的基本用法。Canvas是一个矩形区域，在...
Echarts 3D互联网地球旋转特效
07-24
在这个3D地球特效中，Canvas成为了绘制和更新3D模型的主要平台，通过不断重绘和变换坐标，实现了地球的平滑旋转。 Echarts 的3D功能是通过 WebGL 实现的，WebGL是一种基于OpenGL标准的JavaScript API，用于在浏览器...
canvas绘制直线并跟随鼠标旋转
03-05
"canvas绘制直线并跟随鼠标旋转"这个主题涉及到的核心知识点包括：Canvas API的基本使用、直线的绘制、事件监听以及图形的旋转。下面将详细介绍这些内容。 首先，Canvas API是HTML5的一个重要组成部分，它提供了一...
canvas围绕旋转
01-14
在计算机图形学中，"canvas围绕旋转"是一个常见的概念，主要应用于网页开发中的交互式图形设计。HTML5的canvas元素提供了一个强大的画布，通过JavaScript可以动态绘制和操作图形。本篇文章将深入探讨如何利用canvas...
JavaScript canvas实现围绕旋转动画
10-18
主要为大家详细介绍了JavaScript canvas实现围绕旋转动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
逼真的Canvas 3D地球旋转动画特效
06-11
一个非常逼真的Canvas 3D地球旋转动画特效，支持鼠标拖动缩放查看地球，右下角有全屏查看按钮，点击全屏模式查看地球旋转效果。
HTML5 canvas 3D地球旋转代码.zip
05-14
HTML5 canvas 3D地球旋转代码.zip
Canvas 3D旋转地球
07-18
Canvas 3D旋转地球Canvas 3D旋转地球Canvas 3D旋转地球
Canvas 绘制一个指定的旋转图形(rotate())
houyanhua1的专栏
04-15 6883
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; canvas {
使用Canvas绘制太阳系，太阳、地球、地球轨迹
weixin_42329007的博客
08-29 404
/ 旋转坐标轴，确定地球位置，一分钟（60秒）地球转一圈。// 旋转坐标轴，确定月球位置，6秒转一圈。// 移动坐标轴，以地球中心为基准。// 以画布中心为基准。
通过Canvas绘制一个小型太阳系
m0_50687602的博客
10-28 840
绘制一个地球绕太阳转，月球绕地球转的小型太阳系 运行效果如下 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>太阳系</title> <style> *{margin:0;padding:0;} body{background-color: #000;overf...
canvas实现动画 地球绕太阳公转 月球绕地球公转
徐同保的专栏
09-28 5038
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;canvas&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt;
mapboxGL实现旋转的地球
LZUGIS
08-09 1218
许久未更新，这一篇是凑数的，用最新的mapboxGL2.10的版本实现一个旋转的地球的效果。
canvas 实现地球、月球和太阳在漆黑背景中，地球围着太阳转、月球围着地球转
06-02
好的，这是一个比较复杂的问题，需要绘制三个不同大小的球体，并模拟它们之间的运动关系。以下是一个基本的实现思路： 1. 创建一个画布，并设置一个黑色背景。 2. 绘制太阳，可以使用 `fillStyle` 属性设置为黄色，并使用 `arc` 方法绘制一个圆形。 3. 绘制地球，可以使用 `fillStyle` 属性设置为蓝色，并使用 `arc` 方法绘制一个圆形。 4. 绘制月球，可以使用 `fillStyle` 属性设置为灰色，并使用 `arc` 方法绘制一个圆形。 5. 计算地球和月球的初始位置，并以太阳为中心绘制它们。 6. 创建一个函数，用于更新地球和月球的位置，可以使用三角函数计算它们的坐标。 7. 使用 `requestAnimationFrame` 方法循环调用更新函数，实现动态效果。 以下是一个简单的示例代码，可以根据需要进行修改和优化： ```html <canvas id="canvas" width="600" height="600"></canvas> ``` ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const sunRadius = 50; const earthRadius = 20; const moonRadius = 10; let earthAngle = 0; let moonAngle = 0; function draw() { ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制太阳 ctx.fillStyle = 'yellow'; ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, sunRadius, 0, Math.PI * 2); ctx.fill(); // 计算地球坐标 const earthX = canvas.width / 2 + Math.cos(earthAngle) * (sunRadius + 100); const earthY = canvas.height / 2 + Math.sin(earthAngle) * (sunRadius + 100); // 绘制地球 ctx.fillStyle = 'blue'; ctx.beginPath(); ctx.arc(earthX, earthY, earthRadius, 0, Math.PI * 2); ctx.fill(); // 计算月球坐标 const moonX = earthX + Math.cos(moonAngle) * (earthRadius + 50); const moonY = earthY + Math.sin(moonAngle) * (earthRadius + 50); // 绘制月球 ctx.fillStyle = 'gray'; ctx.beginPath(); ctx.arc(moonX, moonY, moonRadius, 0, Math.PI * 2); ctx.fill(); // 更新地球和月球角度 earthAngle += 0.01; moonAngle += 0.05; requestAnimationFrame(draw); } draw(); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

℡啨天丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值