html--陨石

最新推荐文章于 2024-11-01 15:19:31 发布
最新推荐文章于 2024-11-01 15:19:31 发布
阅读量1.6k 收藏 19
点赞数 33
分类专栏： html 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stqer/article/details/139440746
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>.page-meteor-canvas {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#1e004e));
  background: linear-gradient(to bottom, #000000, #1e004e);
}

.page-meteor-canvas:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background: url("http://static.dar-studio.com/codepen/images/night-sky.jpg") center bottom;
  background-size: cover;
}

.page-meteor-canvas canvas {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.page-meteor-canvas #canvas {
  mix-blend-mode: multiply;
}

.page-meteor-canvas #buffer {
  -webkit-filter: blur(6px) brightness(10) contrast(1.25);
  filter: blur(6px) brightness(10) contrast(1.25);
  mix-blend-mode: screen;
}
</style>
 </HEAD>

 <BODY><div class="page page-meteor-canvas">
	<canvas id="buffer"></canvas>
	<canvas id="canvas"></canvas>
</div>
  <script>"use strict";

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function Meteor(options) {
	var _this = this;

	options = options || {};
	this.main = options.main || {};
	this.ctx = options.ctx;
	this.vfx = options.vfx;
	this.position = options.position || {
		x: Math.random() * this.main.width + this.main.width * 0.25,
		y: Math.random() * -this.main.height * 0.25
	};
	this.rotation = options.rotation || Math.random() * 2 * Math.PI;
	this.velocity = options.velocity || {
		phi: Math.random() * 0.4 - 0.2 + Math.PI * 0.75,
		length: Math.random() * 5 + 1,
		rotate: Math.random() * 0.1 - 0.05
	};
	this.gravity = options.gravity || { phi: Math.PI * 0.5, length: 0.98 };
	this.edge = options.edge || ~~(Math.random() * this.velocity.length + this.velocity.length * 2 + 2);
	this.color = options.color || ["#300", "#610", "#fd2", "#f62"];
	this.timescale = options.timescale || 0.5;
	this.ground = options.ground || this.main.height;
	this.accelerate = options.accelerate || {
		phi: {
			change: Math.random() * 0.015 - 0.0075,
			min: Math.PI * 0.6,
			max: Math.PI * 0.9
		},
		friction: 1.005
	};
	this.points = [].concat(_toConsumableArray(new Array(this.edge))).map(function (e, i) {
		var phi = i / _this.edge * 2 * Math.PI;
		return {
			phi: phi + Math.random() * 0.4 - 0.2,
			length: Math.random() * _this.velocity.length * 2 + _this.velocity.length * 4
		};
	});

	this.update = function (i) {
		this.rotation += this.velocity.rotate * this.timescale;
		this.position.x += Math.cos(this.velocity.phi) * this.velocity.length * this.timescale;
		this.position.y += Math.sin(this.velocity.phi) * this.velocity.length * this.timescale;
		this.position.x += Math.cos(this.gravity.phi) * this.gravity.length * this.timescale;
		this.position.y += Math.sin(this.gravity.phi) * this.gravity.length * this.timescale;
		this.velocity.phi += this.accelerate.phi.change * this.timescale;
		(this.velocity.phi > this.accelerate.phi.max || this.velocity.phi < this.accelerate.phi.min) && (this.accelerate.phi.change = -this.accelerate.phi.change);
		this.velocity.length *= this.accelerate.friction;
		if (this.position.y > this.ground) {
			var ctx = this.vfx;
			var position = this.position;
			var range = this.edge;
			var main = this.main;
			[].concat(_toConsumableArray(new Array(this.edge))).map(function () {
				return main.makeRock({
					position: { x: position.x, y: position.y },
					base: range
				}) || LightFlare(ctx, position.x + Math.random() * 10 * range - 5 * range, position.y + Math.random() * 6 * range - 3 * range, range * Math.random() * 30 + 30);
			});
			this.main.meteors.splice(i, 1);
			this.main.makeMeteor();
		}
	};

	this.render = function () {
		var _this2 = this;

		var ctx = this.ctx;
		ctx.strokeStyle = this.color[0];
		ctx.fillStyle = this.color[1];
		ctx.moveTo(this.position.x, this.position.y);
		ctx.beginPath();
		this.points.forEach(function (p) {
			var x = Math.cos(p.phi + _this2.rotation) * p.length + _this2.position.x;
			var y = Math.sin(p.phi + _this2.rotation) * p.length + _this2.position.y;
			ctx.lineTo(x, y);
		});
		ctx.closePath();
		ctx.stroke();
		ctx.fill();
		//
		var vfx = this.vfx;
		vfx.globalAlpha = Math.random();
		vfx.fillStyle = this.color[2 + ~~(Math.random() + 0.6)];
		vfx.moveTo(this.position.x, this.position.y);
		vfx.beginPath();
		this.points.forEach(function (p) {
			var x = Math.cos(p.phi + _this2.rotation * Math.random() * 0.2 - 0.1) * p.length + Math.random() + _this2.position.x;
			var y = Math.sin(p.phi + _this2.rotation * Math.random() * 0.2 - 0.1) * p.length + Math.random() + _this2.position.y;
			vfx.lineTo(x, y);
		});
		vfx.closePath();
		vfx.fill();
	};
}

function Rock(options) {
	var _this3 = this;

	options = options || {};
	this.main = options.main || {};
	this.base = options.base || 2;
	this.ctx = options.ctx;
	this.vfx = options.vfx;
	this.position = options.position || {
		x: Math.random() * this.main.width,
		y: Math.random() * this.main.height
	};
	this.rotation = options.rotation || Math.random() * 2 * Math.PI;
	this.velocity = options.velocity || {
		phi: Math.random() * Math.PI * 0.5 + Math.PI * 1.25,
		length: Math.random() * 1.5 * this.base + 15,
		rotate: Math.random() * 0.2 - 0.1
	};
	this.gravity = options.gravity || { phi: Math.PI * 0.5, length: 5 };
	this.edge = options.edge || ~~(Math.random() * this.velocity.length + this.velocity.length * 2 + 5);
	this.color = options.color || ["#300", "#510", "#fd2", "#f62"];
	this.timescale = options.timescale || 1.5;
	this.lifespan = options.lifespan || ~~(Math.random() * 30 + 10);
	this.friction = 0.94;
	this.points = [].concat(_toConsumableArray(new Array(this.edge))).map(function (e, i) {
		var phi = i / _this3.edge * 2 * Math.PI;
		return {
			phi: phi + Math.random() * 0.4 - 0.2,
			length: Math.random() * _this3.velocity.length * 0.1 + _this3.velocity.length * 0.2
		};
	});

	this.update = function (i) {
		if (this.lifespan-- <= 0) {
			this.main.meteors.splice(i, 1);
			return;
		}
		this.rotation += this.velocity.rotate * this.timescale;
		this.position.x += Math.cos(this.velocity.phi) * this.velocity.length * this.timescale;
		this.position.y += Math.sin(this.velocity.phi) * this.velocity.length * this.timescale;
		this.position.x += Math.cos(this.gravity.phi) * this.gravity.length * this.timescale;
		this.position.y += Math.sin(this.gravity.phi) * this.gravity.length * this.timescale;
		this.velocity.length *= this.friction;
	};

	this.render = function () {
		var _this4 = this;

		var ctx = this.ctx;
		ctx.globalAlpha = Math.random();
		ctx.strokeStyle = this.color[0];
		ctx.fillStyle = this.color[1];
		ctx.moveTo(this.position.x, this.position.y);
		ctx.beginPath();
		this.points.forEach(function (p) {
			var x = Math.cos(p.phi + _this4.rotation) * p.length + _this4.position.x;
			var y = Math.sin(p.phi + _this4.rotation) * p.length + _this4.position.y;
			ctx.lineTo(x, y);
		});
		ctx.closePath();
		ctx.stroke();
		ctx.fill();
		ctx.globalAlpha = 1;
		//
		var vfx = this.vfx;
		vfx.globalAlpha = Math.random();
		vfx.fillStyle = this.color[2 + ~~(Math.random() + 0.6)];
		vfx.moveTo(this.position.x, this.position.y);
		vfx.beginPath();
		this.points.forEach(function (p) {
			var x = Math.cos(p.phi + _this4.rotation * Math.random() * 0.2 - 0.1) * p.length + Math.random() + _this4.position.x;
			var y = Math.sin(p.phi + _this4.rotation * Math.random() * 0.2 - 0.1) * p.length + Math.random() + _this4.position.y;
			vfx.lineTo(x, y);
		});
		vfx.closePath();
		vfx.fill();
	};
}

function LightFlare(ctx, x, y, range) {
	range = range || 100;
	var strength = Math.random() * range + range;
	var light = ctx.createRadialGradient(x, y, 0, x, y, strength);
	light.addColorStop(0, "rgba(250, 200, 50, 0.4)");
	light.addColorStop(0.1, "rgba(250, 200, 50, 0.3)");
	light.addColorStop(0.4, "rgba(250, 200, 50, 0.2)");
	light.addColorStop(0.65, "rgba(250, 200, 50, 0.1)");
	light.addColorStop(0.8, "rgba(250, 200, 50, 0.05)");
	light.addColorStop(1, "rgba(250, 200, 50, 0)");
	ctx.globalAlpha = 1;
	ctx.beginPath();
	ctx.fillStyle = light;
	ctx.arc(x, y, strength, 0, Math.PI * 2);
	ctx.fill();
	ctx.closePath();
}

function Ground(options) {
	var _this5 = this;

	options = options || {};
	this.main = options.main || {};
	this.ctx = options.ctx;
	this.edge = options.edge || ~~(Math.random() * 10 + 40);
	this.color = options.color || ["#222", "#1e004e"];
	this.height = options.height || this.main.height * 0.16;
	this.points = [].concat(_toConsumableArray(new Array(this.edge))).map(function (e, i) {
		var rand = 1 / _this5.edge * _this5.main.width;
		return {
			x: i / _this5.edge * _this5.main.width + Math.random() * rand - rand * 0.5,
			y: _this5.main.height - _this5.height + Math.random() * _this5.height * 0.1
		};
	});

	this.update = function () {
		return;
	};

	this.render = function () {
		var ctx = this.ctx;
		ctx.strokeStyle = this.color[0];
		ctx.fillStyle = this.color[1];
		ctx.beginPath();
		ctx.moveTo(-this.height, this.main.height);
		this.points.forEach(function (p) {
			return ctx.lineTo(p.x, p.y);
		});
		ctx.lineTo(this.main.width + this.height, this.main.height);
		ctx.closePath();
		ctx.stroke();
		ctx.fill();
	};
}

var main = {
	canvas: document.getElementById("canvas"),
	buffer: document.getElementById("buffer"),
	ctx: null,
	vfx: null,
	ground: null,
	meteors: [],
	count: 8,
	width: window.innerWidth,
	height: window.innerHeight,
	init: function init() {
		var _this6 = this;

		this.registerEvents();
		this.ctx = this.canvas.getContext("2d");
		this.vfx = this.buffer.getContext("2d");
		this.vfx.globalCompositeOperation = "screen";
		//
		this.resize();
		//
		this.ground = new Ground({
			ctx: this.ctx,
			main: this
		});
		[].concat(_toConsumableArray(new Array(this.count))).map(function () {
			return _this6.makeMeteor();
		});
	},

	makeMeteor: function makeMeteor() {
		this.meteors.push(new Meteor({
			ctx: this.ctx,
			vfx: this.vfx,
			ground: this.height - this.ground.height * 0.8,
			main: this
		}));
	},
	makeRock: function makeRock(options) {
		options = options || {};
		this.meteors.push(new Rock({
			ctx: this.ctx,
			vfx: this.vfx,
			position: options.position,
			base: options.base,
			main: this
		}));
	},


	update: function update() {
		this.meteors.forEach(function (m, i) {
			return m.update(i);
		});
		this.ground.update();
	},

	render: function render() {
		this.ctx.clearRect(0, 0, this.width, this.height);
		this.meteors.forEach(function (m) {
			return m.render();
		});
		this.ground.render();
		//
		this.vfx.fillStyle = "#000000";
		this.vfx.globalAlpha = Math.random() * 0.12;
		this.vfx.fillRect(0, 0, this.width, this.height);
	},

	resize: function resize() {
		this.width = window.innerWidth * 1.5;
		this.height = window.innerHeight * 1.5;
		this.canvas.width = this.width;
		this.canvas.height = this.height;
		this.buffer.width = this.width;
		this.buffer.height = this.height;
	},

	registerEvents: function registerEvents() {
		var _this7 = this;

		window.addEventListener("resize", function () {
			_this7.resize();
		}, false);
	}
};

main.init();
(function loop() {
	main.update();
	main.render();
	window.requestAnimationFrame(loop);
})();</script>
 </BODY>
</HTML>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

fo安方
关注
专栏目录
HTML--超链接--a标签-跳转
weixin_46858088的博客
12-18 1万+
页面跳转 一个页面跳转到另一个页面 <a href="" target="">文字或图片</a> href : 绝对地址,相对地址,根路径 target :
HTML-14：羽神的由来
臧小川的博客
06-09 559
Document 羽神的由来 羽神 （西方文化的传说人物） 编辑 讨论18 圣诞老人（Santa C
html5 星际摩托,HTML5 星际陨石环绕动效
weixin_33216825的博客
06-28 151
CSS语言：CSSSCSS确定/* moving orbits */body{background:#211;}#orbits {position: absolute;text-align: center;height: 556px;width: 549px;left: calc(50% - 274px);z-index: -99;top: 35px;background: url(/upload...
html-css实例
weixin_30245867的博客
10-22 55
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>求签</title> <style type="text/css"> *{ ...
纯HTML仿写的网站
卷不动的程序员
06-24 236
【代码】纯HTML仿写的网站。
HTML5基础标签学习
weixin_61920612的博客
11-09 845
学习内容： 1.常用标签 1.1标签语义 学习标签重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。 1.2标题标签<h1> - <h6> 为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题，即<h1> - <h6>。【h是单词head的缩写，意为头部，标题】 标签语义：作为标题使用，并且依据重要性递减。 特点：
陨石的秘密
weixin_33785972的博客
06-10 250
陨石的秘密 分别给出\(l_1,l_2,l_3\)个\(\{\},[],()\)，优先级从低到高，组成一个合法的括号序列，并保证一个括号里的括号优先级要大于等于它，定义深度为括号里套括号的层数，问深度恰好为d的方案数\(mod\ 11380\)，\(0 <= L1 <= 10,0 <= L2 <= 10,0 <= L3 <= 10,0 <= D <=...
Unix-Time
weixin_30955617的博客
07-23 203
1. Unix_time 2. Year_2000_problem 3. Year_10,000_problem 4. Year_2038_problem 5. Time_formatting_and_storage_bugs 6. 更多有关时间的wiki 1. Unix_time https://en.wikipedia.org/wiki/Unix_tim...
poj--3669
weixin_30540691的博客
08-31 64
Description Bessie hears that an extraordinary meteor shower is coming; reports say that these meteors will crash into earth and destroy anything they hit. Anxious for her safety, she vows to find ...
HTML5 3D 陨石火球动画
04-16
解压密码：RJ4587 今天要分享的又是一个基于HTML5 Canvas的炫酷动画，这是一个3D的陨石火球动画。从外观上看，这就像一颗正在坠落的陨石火球，还拖着一条长长的火焰尾巴。同时，我们可以通过拖拽鼠标从不同的视角来...
html5 canvas绘制陨石围绕天体运动的动画特效源码.zip
11-03
这个压缩包“html5 canvas绘制陨石围绕天体运动的动画特效源码.zip”提供了一个使用Canvas API实现的示例，展示了如何创建一个陨石环绕天体运动的动画效果。下面将详细介绍HTML5 Canvas的基础知识以及如何利用它来...
html5 canvas流星陨石掉落地面爆炸动画特效
06-11
这款"html5 canvas流星陨石掉落地面爆炸动画特效"利用了Canvas的强大功能，创建了一个逼真的视觉效果，让访问者仿佛置身于一个星光璀璨的夜晚，看到陨石划破天际，最终撞击地面引发壮观的爆炸。 首先，要实现这个...
html5 canvas实现的陨石掉落爆炸动画特效源码.zip
11-03
在这个“html5 canvas实现的陨石掉落爆炸动画特效源码.zip”中，我们可以找到一个利用HTML5 Canvas创建的动态陨石坠落并爆炸的特效。这个项目可能包括了HTML文件、CSS样式表以及JavaScript脚本，用于实现这个特效。 ...
HTML5 svg实现逼真的陨石流星坠落动画特效源码.zip
11-03
在这个特定的压缩包"HTML5 svg实现逼真的陨石流星坠落动画特效源码.zip"中，我们关注的是HTML5如何与SVG（Scalable Vector Graphics）结合，来实现一种动态的、逼真的陨石流星坠落的视觉效果。 SVG是一种基于XML的...
HTML 基础标签——元数据标签 ＜meta＞
最新发布
Allen-
11-01 221
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2076
【代码】炫酷的登录框!(附源码)
HTML小阶段二维表和思维导图
2301_79075752的博客
10-29 941
下面是对标签、元素、属性的对比二维表，通过对比3w1h（what是什么、where用在哪、why为什么要用、how如何用）来学习区分学习标签、元素、属性标签元素属性what（Tags）标签是用来标记内容块或标明元素内容意义（Element）网页内容是由元素组成的，一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。（Attribute）与元素相关的特性，用于提供额外的信息或配置选项。where开始标签：位于元素的开头，用于标记一个元素的开始。
Html编写发射粒子爱心
m0_58419490的博客
10-31 943
【代码】Html编写发射粒子爱心。
HTML入门教程22：HTML文件路径
软考鸭
10-30 565
相对路径是相对于当前HTML文件所在位置的路径。它不会包含协议、域名或完整的文件路径，而是根据当前文件与目标文件之间的相对位置来确定路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

fo安方

觉得俺的文章还行，感谢打赏，爱

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

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

打赏作者

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

抵扣说明：

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

余额充值