html--蛆

慈云数据 6个月前 (05-28) 技术支持 25 0

 
   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;
}
  
 
 
  
  
  "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();
}
  
 

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

微信扫一扫加客服

微信扫一扫加客服

点击启动AI问答
Draggable Icon