canvas实现流线文本汇聚动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现流线文本汇聚动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: black; overflow: hidden; } canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } p, a { color: white; } p { max-width: 30%; padding: 20px; } </style> </head> <body > <canvas id="canvas1"></canvas> <canvas id="canvas1"></canvas> <script > const canvas = document.getElementById('canvas1'); const ctx = canvas.getContext('2d'); canvas.width = 1700; canvas.height = 500; // canvas settings ctx.fillStyle = 'white'; ctx.strokeStyle = 'white'; ctx.lineWidth = 1; ctx.letterSpacing = '30px'; class Particle { constructor(effect) { this.effect = effect; this.x = Math.floor(Math.random() * this.effect.width); this.y = Math.floor(Math.random() * this.effect.height); this.speedX; this.speedY; this.speedModifier = Math.floor(Math.random() * 2 + 1); this.history = [{ x: this.x, y: this.y }]; this.maxLength = Math.floor(Math.random() * 40 + 10); this.angle = 0; this.newAngle = 0; this.angleCorrector = Math.random() * 0.5 + 0.01; this.timer = this.maxLength * 2; //this.colors = ['#7d0101', '#ad0303', '#db0202', '#ff0303', '#fc2323', '#fc4747', '#fc7e7e', 'white']; //this.colors = ['#f8dc3d', '#f8dc3d', '#f2d322', '#c9ad08', '#917d03', '#574a00', '#fae678', '#fcee9f', '#fff7c7','white']; this.colors = ['rgb(255,255,0)']; this.color = this.colors[Math.floor(Math.random() * this.colors.length)]; } draw(context) { context.beginPath(); context.moveTo(this.history[0].x, this.history[0].y); for (let i = 0; i < this.history.length; i++) { context.lineTo(this.history[i].x, this.history[i].y); } context.strokeStyle = this.color; context.stroke(); } update() { this.timer--; if (this.timer >= 1) { let x = Math.floor(this.x / this.effect.cellSize); let y = Math.floor(this.y / this.effect.cellSize); let index = y * this.effect.cols + x; if (this.effect.flowField[index]) { this.newAngle = this.effect.flowField[index].colorAngle; if (this.angle > this.newAngle) { this.angle -= this.angleCorrector; } else if (this.angle < this.newAngle) { this.angle += this.angleCorrector; } else { this.angle = this.newAngle; } } this.speedX = Math.cos(this.angle); this.speedY = Math.sin(this.angle); this.x += this.speedX * this.speedModifier; this.y += this.speedY * this.speedModifier; this.history.push({ x: this.x, y: this.y }); if (this.history.length > this.maxLength) { this.history.shift(); } } else if (this.history.length > 1) { this.history.shift(); } else { this.reset(); } } reset() { let attempts = 0; let resetSuccess = false; while (attempts < 20 && !resetSuccess) { attempts++; let testIndex = Math.floor(Math.random() * this.effect.flowField.length); if (this.effect.flowField[testIndex].alpha > 0) { this.x = this.effect.flowField[testIndex].x; this.y = this.effect.flowField[testIndex].y; this.history = [{ x: this.x, y: this.y }]; this.timer = this.maxLength * 2; resetSuccess = true; } } if (!resetSuccess) { this.x = Math.random() * this.effect.width; this.y = Math.random() * this.effect.height; this.history = [{ x: this.x, y: this.y }]; this.timer = this.maxLength * 2; } }} class Effect { constructor(canvas, ctx) { this.canvas = canvas; this.context = ctx; this.width = this.canvas.width; this.height = this.canvas.height; this.particles = []; this.numberOfParticles = 10000; this.cellS.........完整代码请登录后点击上方下载按钮下载查看
网友评论0