原生js实现线条视觉变幻动画效果代码
代码语言:html
所属分类:动画
代码描述:原生js实现线条视觉变幻动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } html, body { overflow: hidden; } body { position: relative; background-color: #000; } </style> </head> <body translate="no" > <script> /* * File Name / no name * Created Date / Oct 16, 2020 * Aurhor / Toshiya Marukubo * Twitter / https://twitter.com/toshiyamarukubo */ /* Common Tool. */ class Tool { // random number. static randomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } // random color rgb. static randomColorRGB() { return ( "rgb(" + this.randomNumber(0, 255) + ", " + this.randomNumber(0, 255) + ", " + this.randomNumber(0, 255) + ")"); } // random color hsl. static randomColorHSL(saturation, lightness) { return ( "hsl(" + this.randomNumber(0, 360) + ", " + saturation + "%, " + lightness + "%)"); } // gradient color. static gradientColor(ctx, cr, cg, cb, ca, x, y, r) { const col = cr + "," + cg + "," + cb; const g = ctx.createRadialGradient(x, y, 0, x, y, r); g.addColorStop(0, "rgba(" + col + ", " + ca * 1 + ")"); g.addColorStop(0.5, "rgba(" + col + ", " + ca * 0.5 + ")"); g.addColorStop(1, "rgba(" + col + ", " + ca * 0 + ")"); return g; }} /* When want to use angle. */ class Angle { constructor(angle) { this.a = angle; this.rad = this.a * Math.PI / 180; } incDec(num) { this.a += num; this.rad = this.a * Math.PI / 180; return this.rad; }} /* When want to use controller. */ class Controller { constructor(id) { this.id = document.getElementById(id); } getVal() { return this.id.value; }} /* When want to use time. */ class Time { constructor(time) { this.startTime = time; this.lastTime; this.elapsedTime; } getElapsedTime() { this.lastTime = Date.now(); this.elapsedTime = (this.startTime - this.lastTime) * -1; return this.elapsedTime; }} /* When want to use vector. */ class Vector2d { constructor(x, y) { this.vx = x; this.vy = y; } scale(scale) { this.vx *= scale; this.vy *= scale; } add(vec2) { this.vx += vec2.vx; this.vy += vec2.vy; } sub(vec2) { this.vx -= vec2.vx; this.vy -= vec2.vy; } negate() { this.vx = -this.vx; this.vy = -this.vy; } length() { return Math.sqrt(this.vx * this.vx + this.vy * this.vy); } lengthSquared() { return this.vx * this.vx + this.vy * this.vy; } normalize() { let len = Math.sqrt(this.vx * this.vx + this.vy * this.vy); if (len) { this.vx /= len; this.vy /= len; } return len; } rotate(angle) { let vx = this.vx; let vy = this.vy; let cosVal = Math.cos(angle); let sinVal = Math.sin(angle); this.vx = vx * cosVal - vy * sinVal; this.vy = vx * sinVal + vy * cosVal; } toString() { return '(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0