canvas实现可调参数的dna序列旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现可调参数的dna序列旋转动画效果代码
代码标签: canvas 可调 参数 dna 序列 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { margin: 0; height: 100%; overflow: hidden; } canvas { max-width: 100%; } </style> </head> <body > <canvas id="myCanvas"></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script > // Environment Variables let updateFPS = 30; let showMouse = true; let count = 0; let bgColor = "black"; // Controls const controls = { frequency: 0.02, amplitude: 30, noise: 30 }; const gui = new dat.GUI(); gui.add(controls, "frequency", 0, 1).step(0.01); gui.add(controls, "amplitude", 0, 30).step(0.01); gui.add(controls, "noise", 0, 150).step(0.01); //------ Vector 2D ------- class Vec2 { constructor(x, y) { this.x = x || 0; this.y = y || 0; } set(x, y) { this.x = x; this.y = y; } move(x, y) { this.x += x; this.y += y; } add(value) { return new Vec2(this.x + value.x, this.y + value.y); } sub(value) { return new Vec2(this.x - value.x, this.y - value.y); } mul(number) { return new Vec2(this.x * number, this.y * number); } get length() { return Math.sqrt(this.x * this.x + this.y * this.y); } set length(newValue) { let temp = this.unit.mul(newValue); this.set(temp.x, temp.y); } clone() { return new Vec2(this.x, this.y); } toString() { return `(${this.x}, ${this.y})`; } equal(compareElement) { return this.x == compareElement.x && this.y == compareElement.y; } get angle() { return Math.atan2(this.y, this.x); } get unit() { return this.mul(1 / this.length); }} //--- Canvas Selector ---- const canvas = document.querySelector("#myCanvas"); const ctx = canvas.getContext("2d"); ctx.circle = function (value, radius) { this.arc(value.x, value.y, radius, 0, Math.PI * 2); }; ctx.line = function (value1, value2) { this.moveTo(value1.x, value1.y); this.lineTo(value2.x, value2.y); }; // Set Canvas initCanvas(); function initCanvas() { ww = canvas.width = window.innerWidth; wh = canvas.height = window.innerHeight; } // Set Logic function init() {} // Update Game Logic function update() {} // Update Frame function draw() { count++; // Clear Background ctx.fillStyle = bgColor; ctx.fillRect(0, 0, ww, wh); //------ Draw Here -------- ctx.beginPath(); for (let i = 0; i < ww; i++) { let deg = i * controls.frequency + count / 24; let noise = .........完整代码请登录后点击上方下载按钮下载查看
网友评论0