混沌世界动画特效
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>A world of Turbulence</title> <style> html, body { width: 100%; height: 100%; overflow: hidden; } * { border: none; margin: 0; } </style> </head> <body translate="no"> <script> /** * @author Alex Andrix <alex@alexandrix.com> * @since 2019 */ let App = {}; App.setup = function () { // The setup function initializes everything in a permanent way (will never be set anew) const canvas = document.createElement('canvas'); //const maxWidth = 9933, maxHeight = 14043 //const quality = 0.1 //this.filename = "artwork" this.canvas = canvas; this.canvas.width = window.innerWidth; //maxWidth * quality//window.innerWidth this.canvas.height = window.innerHeight; //maxHeight * quality//3370//window.innerHeight this.ctx = this.canvas.getContext('2d'); this.width = this.canvas.width; this.height = this.canvas.height; this.dataToImageRatio = Math.max(this.width, this.height) / 1000; // Blend mode /!\ Don't use if you can! Can be a mega source of lag, proportional to canvas size this.ctx.globalCompositeOperation = 'darker'; // This one is OK //this.ctx.globalCompositeOperation = 'lighter'// This one is OK this.ctx.imageSmoothingEnabled = false; this.ctx.webkitImageSmoothingEnabled = false; this.ctx.msImageSmoothingEnabled = false; this.xC = this.width / 2; this.yC = this.height / 2; document.getElementsByTagName('body')[0].appendChild(canvas); // Particle system properties this.lifespan = 300; this.popPerBirth = 5; this.maxPop = 1500; this.birthFreq = 1; }; App.start = function () { // The start function sets, and potentially resets things that will change over time this.stepCount = 0; this.particles = []; // Counters for UI this.drawnInLastFrame = 0; this.deathCount = 0; // Initial paint (background most often) this.initDraw(); }; App.evolve = function () { let time1 = performance.now(); this.stepCount++; // Use birth control if (this.stepCount % this.birthFreq == 0 && this.particles.length + this.popPerBirth < this.maxPop) { for (let n = 0; n < this.popPerBirth; n++) { this.birth(); } } // Core sequence: MOVE everything then DRAW everything App.move(); App.draw(); let time2 = performance.now(); }; App.birth = function () { let x = -800 + 1600 * Math.random(), y = -800 + 1600 * Math.random(); let particle = { hue: 190 + 3 * Math.floor(3 * Math.random()), sat: 60 + 30 * Math.random(), lum: 15 + Math.floor(50 * Math.random()), x, y, xLast: x, yL.........完整代码请登录后点击上方下载按钮下载查看
网友评论0