html--蛆,HTML中的蛆,揭示背后的秘密

马肤

温馨提示:这篇文章已超过380天没有更新,请注意相关的内容是否还可用!

摘要:本文简短提及了HTML,并使用了“蛆”这个词。HTML是一种用于创建网页的标准标记语言,而“蛆”通常指腐烂的物质中滋生的昆虫幼虫。这段内容似乎没有明确的上下文或主题,因此摘要也比较简短和模糊。

 
   New Document 
  
  
  
  
  
  body, html {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000;
	cursor: pointer;
}
#node {
	display: none;
}
  
 
 
  html--蛆,HTML中的蛆,揭示背后的秘密 第1张
  
  "use strict";
{
	const Tentacle = class {
		constructor() {
			this.length = 40 + Math.round(80 * Math.random());
			this.vel = 2;
			this.amp = 0.2 + 0.4 * Math.random();
			this.freq = 0.05 + 0.3 * Math.random();
			this.dir = 2 * Math.PI * Math.random();
			this.frame = 0;
			this.free = true;
			this.vDir = 0;
			this.nodes = [];
			for (let i = 0; i  canvas.width) {
				head.x--;
				this.dir += 0.1;
			} else if (head.x  canvas.height) {
				head.y--;
				this.dir += 0.1;
			} else if (head.y  0 ? tentacle.nodes[i - 1] : null;
			this.pprev = i > 1 ? tentacle.nodes[i - 2] : null;
			this.size = 6 + s * s / tentacle.length;
			this.x = x;
			this.y = y;
			this.a = 0;
			this.img = document.getElementById("node");
		}
		move() {
			const dx = this.x - this.pprev.x;
			const dy = this.y - this.pprev.y;
			this.a = Math.atan2(dy, dx);
			const d = Math.sqrt(dx * dx + dy * dy);
			this.x = this.prev.x + dx * 10 / d;
			this.y = this.prev.y + dy * 10 / d;
			ctx.save();
			ctx.translate(this.x, this.y);
			ctx.rotate(this.a + 0.4);
			ctx.drawImage(
				this.img,
				-this.size * 0.5,
				-this.size * 0.5,
				this.size,
				this.size
			);
			ctx.restore();
		}
	};
	const canvas = {
		init() {
			this.elem = document.createElement("canvas");
			document.body.appendChild(this.elem);
			this.resize();
			window.addEventListener("resize", () => this.resize(), false);
			return this.elem.getContext("2d");
		},
		resize() {
			this.width = this.elem.width = this.elem.offsetWidth;
			this.height = this.elem.height = this.elem.offsetHeight;
		}
	};
	const pointer = {
		init(canvas) {
			this.x = -1000;
			this.y = 0;
			["mousemove", "touchstart", "touchmove"].forEach((event, touch) => {
				document.addEventListener(
					event,
					e => {
						if (touch) {
							e.preventDefault();
							this.x = e.targetTouches[0].clientX;
							this.y = e.targetTouches[0].clientY;
						} else {
							this.x = e.clientX;
							this.y = e.clientY;
						}
					},
					false
				);
			});
		}
	};
	const ctx = canvas.init();
	pointer.init(canvas);
	const tentacles = [];
	for (let i = 0; i  {
		requestAnimationFrame(run);
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		for (const tentacle of tentacles) {
			tentacle.move();
		}
	};
	run();
}
  
 

html--蛆,HTML中的蛆,揭示背后的秘密 第2张

html--蛆,HTML中的蛆,揭示背后的秘密 第3张

html--蛆,HTML中的蛆,揭示背后的秘密 第4张

html--蛆,HTML中的蛆,揭示背后的秘密 第5张

html--蛆,HTML中的蛆,揭示背后的秘密 第6张


0
收藏0
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

  • 【研发日记】Matlab/Simulink自动生成代码(二)——五种选择结构实现方法,Matlab/Simulink自动生成代码的五种选择结构实现方法(二),Matlab/Simulink自动生成代码的五种选择结构实现方法详解(二)
  • 超级好用的C++实用库之跨平台实用方法,跨平台实用方法的C++实用库超好用指南,C++跨平台实用库使用指南,超好用实用方法集合,C++跨平台实用库超好用指南,方法与技巧集合
  • 【动态规划】斐波那契数列模型(C++),斐波那契数列模型(C++实现与动态规划解析),斐波那契数列模型解析与C++实现(动态规划)
  • 【C++】,string类底层的模拟实现,C++中string类的模拟底层实现探究
  • uniapp 小程序实现微信授权登录(前端和后端),Uniapp小程序实现微信授权登录全流程(前端后端全攻略),Uniapp小程序微信授权登录全流程攻略,前端后端全指南
  • Vue脚手架的安装(保姆级教程),Vue脚手架保姆级安装教程,Vue脚手架保姆级安装指南,Vue脚手架保姆级安装指南,从零开始教你如何安装Vue脚手架
  • 如何在树莓派 Raspberry Pi中本地部署一个web站点并实现无公网IP远程访问,树莓派上本地部署Web站点及无公网IP远程访问指南,树莓派部署Web站点及无公网IP远程访问指南,本地部署与远程访问实践,树莓派部署Web站点及无公网IP远程访问实践指南,树莓派部署Web站点及无公网IP远程访问实践指南,本地部署与远程访问详解,树莓派部署Web站点及无公网IP远程访问实践详解,本地部署与远程访问指南,树莓派部署Web站点及无公网IP远程访问实践详解,本地部署与远程访问指南。
  • vue2技术栈实现AI问答机器人功能(流式与非流式两种接口方法),Vue2技术栈实现AI问答机器人功能,流式与非流式接口方法探究,Vue2技术栈实现AI问答机器人功能,流式与非流式接口方法详解
  • 发表评论

    快捷回复:表情:
    评论列表 (暂无评论,0人围观)

    还没有评论,来说两句吧...

    目录[+]

    取消
    微信二维码
    微信二维码
    支付宝二维码