H5 canvas小案例-行星旋转

最新推荐文章于 2023-04-18 14:21:44 发布

XinHaiYe

最新推荐文章于 2023-04-18 14:21:44 发布

阅读量389

点赞数

分类专栏： # html 文章标签： canvas html

本文链接：https://blog.csdn.net/weixin_47763579/article/details/118058567

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

图示

在这里插入图片描述

直接干代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			body{
				overflow: hidden;
			}
			
		</style>
	</head>
	<body>
		
		
		<canvas id="galaxy" width="1500" height="1000" ></canvas>
		
		
		<script type="text/javascript">
			const galaxy = document.querySelector("#galaxy");
			
	
		
			const ct = galaxy.getContext("2d");
			
			
			const colors = ct.createLinearGradient(0,200,200,0);
			colors.addColorStop(0,"#000");
			colors.addColorStop(0.5,"#111111");
			colors.addColorStop(1.0,"#000");
			
			var rcolors = null;
			
			var n = 1;
			
			
			// 屏幕高宽
			const w = 1390;
			const h = 680;
			// 圆心坐标
			const rx = Math.floor(w/2);
			const ry = Math.floor(h/2);
			
			ct.translate(rx,ry);
			function drawGalaxy(){
				ct.clearRect(-rx,-ry,w,h);
				// 背景
				
				ct.fillStyle = colors;
				ct.beginPath();
				ct.fillRect(-rx,-ry,w,h);
				ct.closePath()
				
				// 星星
				for (var i = 0; i < 150; i++) {
					ct.beginPath()
					ct.strokeStyle = 'white';
					ct.arc(getRandom(-rx,rx),getRandom(-ry,ry),1,0, getRandom(90,360) ,false);
					ct.stroke();
				}
				
				
				// 旋转标记
				if(n++ == 360){
					n = 1
				}
				
				
				// 太阳
				rcolors = ct.createRadialGradient(0,0,1,0,0,50);
				rcolors.addColorStop(0,'#ec1221');
				rcolors.addColorStop(0.5,'#ec2427');
				rcolors.addColorStop(1.0,'#ec283c');
				ct.save()
				ct.beginPath()
				ct.fillStyle = rcolors;
				ct.arc(0,0,50,0,360,false);
				ct.fill();
				ct.restore()
				
				// 水星
				rcolors = ct.createRadialGradient(0,0,1,0,0,10);
				rcolors.addColorStop(0,'#0c40ff')
				rcolors.addColorStop(0.5,'#2063ff')
				rcolors.addColorStop(1.0,'#3575ff')
				
				ct.beginPath();
				ct.strokeStyle = "#03A9F4"
				ct.arc(0,0,70,0,360,false);
				ct.stroke();
				ct.closePath()
				
				ct.save()
				
				ct.beginPath()
				ct.rotate(n*3*Math.PI/180);
				ct.fillStyle = rcolors;
				ct.arc(0,-70,10,0,360,false);
				ct.fill();
				ct.closePath()
				ct.restore()
				
				
				// 金星
				rcolors = ct.createRadialGradient(0,0,1,0,0,15);
				rcolors.addColorStop(0,'#ff4c06')
				rcolors.addColorStop(0.5,'#ff7818')
				rcolors.addColorStop(1.0,'#ffb726')
				
				ct.beginPath();
				ct.strokeStyle = "#03A9F4"
				ct.arc(0,0,100,0,360,false);
				ct.stroke();
				ct.closePath()
				
				ct.save()
				
				ct.beginPath()
				ct.rotate(n*4*Math.PI/180);
				ct.fillStyle = rcolors;
				ct.arc(0,-100,15,0,360,false);
				ct.fill();
				ct.closePath()
				ct.restore()
				
				
				// 地球
				rcolors = ct.createRadialGradient(0,0,1,0,0,18);
				rcolors.addColorStop(0,'#0caaff')
				rcolors.addColorStop(0.5,'#78beff')
				rcolors.addColorStop(1.0,'#92c7ff')
				
				ct.beginPath();
				ct.strokeStyle = "#03A9F4"
				ct.arc(0,0,140,0,360,false);
				ct.stroke();
				ct.closePath()
				
				ct.save()
				
				ct.beginPath()
				ct.rotate(n*2*Math.PI/180);
				ct.fillStyle = rcolors;
				ct.arc(0,-140,18,0,360,false);
				ct.fill();
				ct.closePath()
				ct.restore()
				
				
				// 火星
				rcolors = ct.createRadialGradient(0,0,1,0,0,16);
				rcolors.addColorStop(0.2,'#ff5500')
				
				
				ct.beginPath();
				ct.strokeStyle = "#03A9F4"
				ct.arc(0,0,180,0,360,false);
				ct.stroke();
				ct.closePath()
				
				ct.save()
				
				ct.beginPath()
				ct.rotate(n*7*Math.PI/180);
				ct.fillStyle = rcolors;
				ct.arc(0,-180,16,0,360,false);
				ct.fill();
				ct.closePath()
				ct.restore()
				
				
			}
			
		
			
			
			
			
			drawGalaxy()
			setInterval(drawGalaxy,60);
			
			
			
			
			function getRandom(min,max){
				const choose = max - min +1;
				return Math.floor(Math.random()*choose +min);
			}
			
			
			
		</script>
	</body>
</html>

XinHaiYe

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
H5 canvas小案例-行星旋转

图示直接干代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ overflow: hidden; } </style>
复制链接

扫一扫