canvas文字发光倒影鼠标移动交互动画i效果代码
代码语言:html
所属分类:其他
代码描述:canvas文字发光倒影鼠标移动交互动画i效果代码
代码标签: canvas 文字 发光 倒影 鼠标 移动 交互 动画i
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body, html { margin: 0; background: -webkit-radial-gradient(center, ellipse cover, #111 10%, #333 90%); } canvas { display: block; cursor: crosshair; } h2 { position: absolute; bottom: 10px; width: 100%; letter-spacing: 4px; text-align: center; font-weight: bold; font-size: 1em; font-family: Arial, Helvetica, sans-serif; color: #AAA; } </style> </head> <body> <!-- partial:index.partial.html --> <canvas id="canvas"></canvas> <h2>Move the mouse!</h2> <script > /* Johan Karlsson https://github.com/DonKarlssonSan/vectory MIT License, see Details View */ "use strict"; class Vector { constructor(x, y) { this.x = x; this.y = y; } add(v) { return new Vector( this.x + v.x, this.y + v.y); } addTo(v) { this.x += v.x; this.y += v.y; return this; } sub(v) { return new Vector( this.x - v.x, this.y - v.y); } subFrom(v) { this.x -= v.x; this.y -= v.y; } mult(n) { return new Vector(this.x * n, this.y * n); } multTo(n) { this.x *= n; this.y *= n; return this; } div(n) { return new Vector(this.x / n, this.y / n); } divTo(n) { this.x /= n; this.y /= n; } setAngle(angle) { var length = this.getLength(); this.x = Math.cos(angle) * length; this.y = Math.sin(angle) * length; } setLength(length) { var angle = this.getAngle(); this.x = Math.cos(angle) * length; this.y = Math.sin(angle) * length; } getAngle() { return Math.atan2(this.y, this.x); } getLength() { return Math.hypot(this.x, this.y); } getLengthSq() { return this.x * this.x + this.y * this.y; } distanceTo(v) { return this.sub(v).getLength(); } distanceToSq(v) { return this.sub(v).getLengthSq(); } manhattanDistanceTo(v) { return Math.abs(v.x - this.x) + Math.abs(v.y - this.y); } copy() { return new Vector(this.x, this.y); } rotate(angle) { return new Vector( this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle)); } rotateTo(angle) { let x = this.x * Math.cos(angle) - this.y * Math.sin(angle); let y = this.x * Math.sin(angle) + this.y * Math.cos(angle); this.x = x; this.y = y; return this; } rotateAround(v, angle) { let x = (this.x - v.x) * Math.cos(angle) - (v.y - this.y) * Math.sin(angle) + v.x; let y = (this.x - v.x) * Math.sin(angle) + (v.y - this.y) * Math.cos(angle) + v.y; return new Vector(x, y); } rotateMeAround(v, angle) { let x = (this.x - v.x) * Math.cos(angle) - (v.y - this.y) * Math.sin(angle) + v.x; let y = (this.x - v.x) * Math.sin(angle) + (v.y - this.y) * Math.cos(angle) + v.y; this.x = x; this.y = y; return this; } equals(v) { return this.x == v.x && this.y == v.y; } reflectAlongX() { this.y *= -1; } reflectAlongY() { this.x *= -1; }} /* Johan Karlsson (DonKarlssonSan) 2018 Using my vector lib stored as a separate Pen: https://codepen.io/DonKarlssonSan/pen/JreEJO Also available at GitHub: https://github.com/DonKarlssonSan/vectory and npm: https://www.npmjs.com/package/vectory-lib */ const config = { text: "Repellers", widthToSpikeLengthRatio: 0.054 }; const colorConfig = { particleOpacity: 0.2, baseHue: 350, hueRange: 9, hueSpeed: 0.04, colorSaturation: 100 }; // A line that is part .........完整代码请登录后点击上方下载按钮下载查看
网友评论0