webgl+canvas实现鼠标跟随电焊电弧光标动画效果代码-html代码-BFW代码库

webgl+canvas实现鼠标跟随电焊电弧光标动画效果代码

代码语言：html

所属分类：动画

代码描述：webgl+canvas实现鼠标跟随电焊电弧光标动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
<style>
html,
body {
	height: 100%;
	margin: 0;
	background: #0b0f14;
}
#wrap {
	position: relative;
	width: 100%;
	height: 100%;
}
canvas {
	width: 100%;
	height: 100%;
	display: block;
	cursor: crosshair;
}
.hud {
	position: absolute;
	top: 10px;
	left: 10px;
	font: 12px/1.3 system-ui, Segoe UI, Roboto, Arial;
	color: #cfe8ff;
	background: rgba(0, 0, 0, 0.35);
	padding: 8px 10px;
	border-radius: 8px;
}
code {
	color: #9cf;
}
</style>

  
</head>

<body translate="no">
  <div id="wrap">
	<canvas id="fx"></canvas>
	<div class="hud">
		API: <code>const weld = new ArcWeldEffect(canvas[, options])</code><br />
		Méthodes: <code>start()</code> · <code>stop()</code> · <code>destroy()</code> · <code>setOptions()</code>
	</div>
</div>

<script>
	document.addEventListener('DOMContentLoaded', () => {
		const canvas = document.getElementById("fx");
		const weld = new ArcWeldEffect(canvas, {
			baseIntensity: 0.08,
			speedGain: 1.0,
			clickBoost: 1.6,
			glowRadius: 90,
			sparkCount: 500,
			color: [0.81, 0.93, 1.0],
			noiseSeed: 4025
		});
		weld.start();
		// quick smoke tests
		window.addEventListener("blur", () => weld.setOptions({
			baseIntensity: 0.02
		}));
		window.addEventListener("focus", () =>
			weld.setOptions({
				baseIntensity: 0.08
			})
		);
		window.addEventListener("resize", () => {
			/* handled internally by ResizeObserver */
		});
	})
</script>
  
      <script>
class ArcWeldEffect {
	constructor(target, options = {}) {
		// Public options (with defaults)
		this.opts = {
			baseIntensity: 0.08,
			speedGain: 0.9,
			clickBoost: 1.2,
			glowRadius: 80,
			sparkCount: 400,
			color: [0.85, 0.95, 1.0], // electric white-blue
			noiseSeed: 1337,
			...options
		};

		// Resolve canvas or container
		this._externalCanvas = false;
		if (target instanceof HTMLCanvasElement) {
			this.canvas = target;
			this._externalCanvas = true;
		} else {
			this.canvas = document.createElement("canvas");
			(target || document.body).appendChild(this.canvas);
		}

		// Pointer state
		this.pointer = {
			x: 0,
			y: 0,
			px: 0,
			py: 0,
			speed: 0,
			down: false,
			inside: false
		};

		this._running = false;
		this._raf = null;
		this._lastT = 0;
		this._flashT = 0; // short flash when click pressed

		// DPR / resize
		this._resizeObserver = null;

		// Try WebGL, else Canvas2D fallback
		this.gl = this.canvas.getContext("webgl", {
			premultipliedAlpha: false,
			alpha: true,
			antialias: false,
			depth: false,
			stencil: false
		});
		if (this.gl) {
			this._initGL();
		} else {
			this._init2D();
		}

		// Events
		this._bindEvents();
		this._resize();
	}

	// --- Public API ---
	start() {
		if (this._running) return this;
		this._running = true;
		this._lastT = performance.now();
		const loop = (t) => {
			if (!this._running) return;
			const dt = Math.min(0.05, Math.max(0, (t - this._lastT) / 1000));
			this._lastT = t;
			this._update(dt);
			this._draw(t / 1000);
			this._raf = requestAnimationFrame(loop);
		};
		this._raf = requestAnimationFrame(loop);
		r.........完整代码请登录后点击上方下载按钮下载查看