canvas+js绘制星空页面

已于 2022-05-24 10:00:05 修改
阅读量217 收藏 1
点赞数
文章标签： html5 javascript
于 2021-05-06 18:53:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40380115/article/details/116460489
版权

canvas+js绘制星空页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				overflow: hidden;
			}
			#canvas{
				display: block;
				background-color: #000000;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script type="text/javascript">
			var w,h;
			var rainCount = 20;  //流星雨的数量
			var num = 200; //动点数量
			var rains = [];
			var data =[];       
			var cxt;
			init();
			function init(){
				canvas = document.getElementById("canvas");
				w = canvas.width = window.innerWidth;
				h = canvas.height = window.innerHeight;
				cxt = canvas.getContext("2d");
			}
			window.onload = function(){
				init2();AAAAAAAAAAAAAAAAAAA
				for(var i=0;i<rainCount;i++){
					var rain = new Meteor();
					rain.init();
					rain.draw();
					rains.push(rain);
				}
				meteorMove();
			}
			/***********绘制动点*****************/
			function init2(){
				for(var i=0;i<num;i++){
					data[i] = {
						x:Math.random()*w,
						y:Math.random()*h,
						cX:Math.random()*0.6-0.3,
						cY:Math.random()*0.6-0.3
					     };
					cricle(data[i].x,data[i].y);
				}
			}
			function cricle(x,y){
				var c = Math.random();
				cxt.save();
				cxt.beginPath();
				cxt.arc(x,y,1,0,2*Math.PI);
				cxt.fillStyle = "pink";
				cxt.fill();
				cxt.closePath();
				cxt.restore();
			} 
			/*****************************/
			/****流星***/
			var Meteor = function(){
					this.x = -1;
					this.y = -1;
					this.width = -1;
					this.height = -1;
					this.length = -1;
					this.angle = 0;
					this.offset_x =0;
					this.offset_y =0;
					this.speed = 0;
					this.color1 = "";
					this.color2 = "";
				
				this.init = function(){
					this.x = w*Math.random();
					this.y = h*Math.random();
					this.rainColor();
					this.length = Math.ceil(Math.random()*60+170);
					this.angle = 30;
					this.width = this.length*(Math.cos(this.angle*3.14/180));
					this.height = this.length*(Math.sin(this.angle*3.14/180));
				}
					/*****流星颜色****/
				this.rainColor = function(){
					var c =255-parseInt(Math.random()*240);
					this.color1 = "rgba("+c+",20,100,0.5)";
					this.color2 = "#000000";
				}
				/*****绘制流星雨***/
				this.draw = function(){
					cxt.save();
					cxt.beginPath();
					cxt.lineWidth = 1;
					var gradient = cxt.createLinearGradient(this.x,this.y,this.x-this.width,this.y-this.height);
					gradient.addColorStop(0,"white");
					gradient.addColorStop(0.3,this.color1);
					gradient.addColorStop(0.6,this.color2);
					cxt.strokeStyle = gradient;
					cxt.moveTo(this.x,this.y);
					cxt.lineTo(this.x-this.width,this.y-this.height);
					cxt.closePath();
					cxt.stroke();
					cxt.restore();
				}
				/****流星移动***/
				this.move = function(){
					this.speed = Math.random()*2;
					this.offset_x = this.speed*Math.cos(this.angle*3.14/180);
					this.offset_y = this.speed*Math.sin(this.angle*3.14/180);
					//cxt.clearRect(this.x-this.width,this.y-this.height,this.width,this.height);
					/********重新计算坐标点***********/
					this.x = this.x+this.offset_x;
					this.y = this.y+this.offset_y;
					this.draw();
					
				}
				
			}
			/******所有的流星移动*******/
			function meteorMove(){
				for(var i=0;i<rainCount;i++){
					rains[i].move();
					/*****对超出边界的流星就行处理*****/
					if(rains[i].y>=window.innerHeight  || rains[i].y>=window.innerWidth){
						cxt.clearRect(rains[i].x-rains[i].width,rains[i].y-rains[i].height,rains[i].width,rains[i].height);
						rains[i] = new Meteor();
						rains[i].init();
					}
				}
				setTimeout("meteorMove()",2);
			}
		</script>
	</body>
</html>

在这里插入图片描述

小羔子1997
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+JS：画布canvas星空背景
renjingzhaozhao的博客
04-08 2523
由远及近视觉效果 <!doctype html> <html> <head> <meta charset="utf-8"> <title>纯js完成canvas星空粒子效果-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jq...
Canvas星空效果（JS面向对象）
前端向朔
04-17 7463
概述 更多Canvas实例可以看GitHub，不定时更新：https://github.com/xiangshuo1992/canvas-demo 这个Demo主要有以下几点可以讨论： 1.HTML5 canvas的基础API，如 context.beginPath(); 2.获取屏幕大小，并响应窗口大小变化 3.JS面向对象 先看效果 Canvas星空效果 See the Pe...
canvas星空背景
最新发布
p_s_p的博客
07-24 346
【代码】canvas星空背景。
Canvas+JS实现星空l粒子连线效果
一个鮕娘的博客
07-21 5294
效果截图： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial- scale=1.0"&
js 实现星空背景
qq_44571444的博客
02-22 371
js实现宇宙星空效果
基于canvas绘制星空图
04-04
在JavaScript中，我们使用`document.createElement('canvas')`创建一个canvas对象，并通过`document.body.appendChild(canvas)`将其添加到页面中。然后，我们需要获取canvas的2D渲染上下文，这可以通过`canvas....
怎么用html做出星空页面,用HTML5+canvas代码绘制的星空月亮图案特效代码
weixin_42365303的博客
06-04 2245
脚本代码(For Alixixi.com)如下:用HTML5绘制的一个星空特效图canvas{display: block;border:1px dotted skyblue;}body{font-family: 微软雅黑;}用HTML5绘制的一个星空特效图var nimo={};window.onload=function(){nimo.canvas=document.getElementByI...
利用CSS+JS实现唯美星空轨迹运动效果
09-24
总的来说，通过这个项目，我们可以学习到Canvas API的使用，理解如何用JavaScript处理时间和动画，以及如何利用CSS创建暗色调的背景，营造出星空的氛围。同时，这也是一个很好的实践，展示了现代Web开发中JavaScript...
JS+canvas画布实现炫酷的旋转星空效果示例
10-17
最后，我们使用requestAnimationFrame动画循环来更新和绘制星空。在这个循环中，我们会更新每个星星的位置，根据其轨道半径和速度旋转，并调用`clearRect`清除画布，避免旧的星星位置残留。然后，我们将星星绘制到主...
JS实现动态星空背景效果
10-16
主要为大家详细介绍了JS实现动态星空背景效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Javascript动态星空背景
08-22
使用很多移动的白色小点代表星星，两个星星在一定距离内会有白线连接，白线透明度根据距离增大或缩小实现圆滑，鼠标也代表一颗星星
动态星空, 动态蜂巢 H5 代码 学习canvas JS 不错的资源
05-21
里面有精美的canvas特效做出来的星空代码 可以又来做自己特例独行的网页代码 也可以作为自己的简历介绍页面 也可以用来学习前端H5动画效果 总之是一波不错的学习资源
js实现旋转的星空效果
12-13
本文实例为大家分享了js实现旋转的星空效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="starry sky"> <meta name="description" content="the starry sky"> <title>旋转的星空(the starry s
js实现漂亮的星空背景
10-16
主要为大家详细介绍了js实现漂亮的星空背景，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML+JS实现星空背景
m0_46664046的博客
12-16 5813
接下来我将以通俗易懂的方式来讲解如何通过javascript实现好看的星空背景
如何使用 JavaScript 和 Canvas 创建星形图案
web前端开发
09-28 572
英文 | https://javascript.plainenglish.io/how-to-create-a-star-pattern-using-javascript-and-canv...
js动态实现星空效果
LZhizi的博客
04-15 2340
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>星空动效</ti...
用canvas绘制一个星空烟花场景
06-01
好的，以下是一个用Canvas绘制星空烟花的示例代码： HTML代码： ``` <canvas id="myCanvas"></canvas> ``` JavaScript代码： ```javascript // 获取canvas和绘图上下文 var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // 设置画布宽度和高度 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 定义星星对象 function Star(x, y, radius, speed) { this.x = x; this.y = y; this.radius = radius; this.speed = speed; } // 定义火花对象 function Spark(x, y, color, radius, speed, direction) { this.x = x; this.y = y; this.color = color; this.radius = radius; this.speed = speed; this.direction = direction; } // 定义一个数组来存储火花 var sparks = []; // 创建星星 var stars = []; for (var i = 0; i < 200; i++) { var x = Math.random() * canvas.width; // 随机x坐标 var y = Math.random() * canvas.height; // 随机y坐标 var radius = Math.random() * 3; // 随机半径 var speed = Math.random() * 2; // 随机速度 stars.push(new Star(x, y, radius, speed)); // 添加到星星数组 } // 动画循环 function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布 // 绘制星星 ctx.fillStyle = '#ffffff'; for (var i = 0; i < stars.length; i++) { var star = stars[i]; ctx.beginPath(); ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2); ctx.fill(); star.x -= star.speed; // 移动星星 if (star.x < 0) { star.x = canvas.width; // 重置x坐标 } } // 绘制火花 for (var i = 0; i < sparks.length; i++) { var spark = sparks[i]; ctx.fillStyle = spark.color; ctx.beginPath(); ctx.arc(spark.x, spark.y, spark.radius, 0, Math.PI * 2); ctx.fill(); spark.x += Math.cos(spark.direction) * spark.speed; // 计算x方向速度 spark.y += Math.sin(spark.direction) * spark.speed; // 计算y方向速度 spark.radius -= 0.05; // 缩小半径 } // 移除已经消失的火花 for (var i = sparks.length - 1; i >= 0; i--) { if (sparks[i].radius < 0) { sparks.splice(i, 1); } } requestAnimationFrame(animate); // 动画循环 } // 鼠标点击事件，添加火花 canvas.addEventListener('click', function(e) { var x = e.clientX; var y = e.clientY; var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#00ffff', '#ff00ff']; // 颜色数组 for (var i = 0; i < 30; i++) { var color = colors[Math.floor(Math.random() * colors.length)]; var radius = Math.random() * 4 + 1; // 随机半径 var speed = Math.random() * 5 + 1; // 随机速度 var direction = Math.random() * Math.PI * 2; // 随机方向 sparks.push(new Spark(x, y, color, radius, speed, direction)); // 添加到火花数组 } }); animate(); // 开始动画循环 ``` 这段代码将创建200个星星，并且在鼠标点击事件触发时添加30个随机颜色的火花。火花会随机移动，并在逐渐缩小半径后消失。同时，星星也会随机移动，创建出星空的效果。您可以根据需要进行修改和调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值