js实现炫酷三角canvas背景动画效果代码
代码语言:html
所属分类:背景
代码描述:js实现炫酷三角canvas背景动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> </head> <body> <script> class Utils { // 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(hue, saturation, lightness) { return ( "hsl(" + hue + ", " + 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; } // create multiple array static createMultipleArray(number_one, number_two) { let num_one = number_one; let num_two = number_two; let arr = new Array(num_one); for (let i = 0; i < num_one; i++) { arr[i] = new Array(num_one); for (let j = 0; j < num_two; j++) { arr[i][j] = 0; } } return arr; } // framerate static calcFPS() { const now = (+new Date()); const fps = 1000 / (now - lastTime); lastTime = now; return fps.toFixed(); } } /* * File Name / vector2d.js * Referenced / O'Reilly Programming HTML5 Canvas * Author / Toshiya Marukubo * Twitter / https://twitter.com/toshiyamarukubo */ class Vector2d { constructor(x, y) { this.vx = x; this.vy = y; } scale(scale) { this.vx *= scale; this.vy *= scale; } add(v, x, y) { if (v instanceof Vector2d) { return new Vector2d(this.vx + v.vx, this.vy + v.vy); } else { this.vx += x; this.vy += y; } } mult(num) { return new Vector2d(this.vx * num, this.vy * num); } sub(v, x, y) { if (v instanceof Vector2d) { return new Vector2d(this.vx - v.vx, this.vy - v.vy); } else { this.vx -= x; this.vy -= y; } } dist(v) { return Math.sqrt(Math.pow(v.vx - this.vx, 2) + Math.pow(v.vy - this.vy, 2)); } fromAngle(radian) { this.vx = Math.cos(radian); this.vy = Math.sin(radian); } 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 '(' + this.vx.toFixed(3) + ',' + this.vy.toFixed(3) + ')'; } } /* * File Name / collision.js * Referenced / O'Reilly Programming HTML5 Canvas * Author / Toshiya Marukubo * Twitter / https://twitter.com/toshiyamarukubo */ class Collision { constructor(targetArr) { this.arr = targetArr; } collideAll() { let vec = new Vector2d(0, 0); let dist; let obj1; let obj2; let c; let i; for (c = 0; c < this.arr.length; c++) { obj1 = this.arr[c]; for (i = c + 1; i < this.arr.length; i++) { obj2 = this.arr[i]; vec.vx = obj2.x - obj1.x; vec.vy = obj2.y - obj1.y; dist = vec.length(); if (dist < obj1.r + obj2.r) { vec.normalize(); vec.scale(obj1.r + obj2.r - dist); vec.negate(); obj1.x += vec.vx; obj1.y += vec.vy; this.bounce(obj1, obj2); } } } } bounce(obj1, obj2) { let colnAngle = Math.atan2(obj1.y - obj2.y, obj1.x - obj2.x); let length1 = obj1.v.length(); let length2 = obj2.v.length(); let dirAngle1 = Math.atan2(obj1.v.vy, obj1.v.vx); let dirAngle2 = Math.atan2(obj2.v.vy, obj2.v.vx); let newVX1 = length1 * Math.cos(dirAngle1 - colnAngle); let newVX2 = length2 * Math.cos(dirAngle2 - colnAngle); obj1.v.vy = length1 * Math.sin(dirAngle1 - colnAngle); obj2.v.vy = length2 * Math.sin(dirAngle2 - colnAngle); obj1.v.vx = ((obj1.r - obj2.r) * newVX1 + (2 * obj2.r) * newVX2) / (obj1.r + obj2.r); obj2.v.vx = ((obj2.r - obj1.r) * newVX2 + (2 * obj1.r) * newVX1) / (obj1.r + obj2.r); obj1.v.rotate(colnAngle); obj2.v.rotate(colnAngle); } } /* * File Name / stopwatch.js * Referenced / O'Reilly Programming HTML5 Canvas * Author / Toshiya Marukubo * Twitter / https://twitter.com/toshiyamarukubo */ class Stopwatch { constructor(time) { this.startTime = 0; this.running = false; this.elapsed = undefined; } start() { this.startTime = +new Date(); this.elapsedTime = null; this.running = true; } stop() { this.elapsed = (+new Date()) - this.startTime; this.running = false; } getElapsedTime() { if (this.running) { return (+new Date()) - this.startTime; } else { return this.elapsed; } } isRunning() { return this.running; } reset() { this.elapsed = 0; } } /* * File Name / animationTimer.js * Referenced / O'Reilly Programming HTML5 Canvas * Author / Toshiya Marukubo * Twitter / https://twitter.com/toshiyamarukubo */ class AnimationTimer { constructor(duration, timeWarp) { if (duration !== undefined) this.duration = duration; if (timeWarp !== undefined) this.timeWarp = timeWarp; this.stopwatch = new Stopwatch(); } start() { this.stopwatch.start(); } stop() { this.stopwatch.stop(); } getElapsedTime() { const elapsedTime = this.stopwatch.getElapsedTime(); const percentComplete = elapsedTime / this.duration; if (!this.stopwatch.running) return undefined; if (this.timeWarp === undefined) return elapsedTime; return elapsedTime * (this.timeWarp(percentComplete) / percentComplete); } isRunning() { return this.stopwatch.running; } isOver() { return this.stopwatch.getElapsedTime() > this.duration; } makeEaseIn(strength) { return function(percentComplete) { return Math.pow(per.........完整代码请登录后点击上方下载按钮下载查看
网友评论0