js实现canvas鼠标经过发光粒子散开动画效果代码
代码语言:html
所属分类:粒子
代码描述:js实现canvas鼠标经过发光粒子散开动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> html, body { position: absolute; overflow: hidden; margin: 0; padding: 0; width: 100%; height: 100%; background:#000; touch-action: none; content-zooming: none; } canvas { position: absolute; width: 100%; height: 100%; background:#000; } </style> </head> <body> <canvas></canvas> <script> "use strict"; { // particles class class Particle { constructor(k, i, j) { this.i = i; this.j = j; this.init(); this.x = this.x0; this.y = this.y0; this.pos = posArray.subarray(k * 3, k * 3 + 3); this.pointer = pointer; } init() { this.x0 = canvas.width * 0.5 + this.i * canvas.width / 240; this.y0 = canvas.height * 0.5 + this.j * canvas.height / 160; } move() { const dx = this.pointer.x - this.x; const dy = this.pointer.y - this.y; const d = Math.sqrt(dx * dx + dy * dy); const s = 1000 / d; this.x += -s * (dx / d) + (this.x0 - this.x) * 0.02; this.y += -s * (dy / d) + (this.y0 - this.y) * 0.02; // update buffer position this.pos[0] = this.x; this.pos[1] = this.y; this.pos[2] = 0.15 * s * s; } } // webGL canvas const canvas = { init(options) { // set webGL context this.elem = document.querySelector("canvas"); const gl = (this.gl = this.elem.getContext("webgl", options) || this.elem.getContext("experimental-webgl", options)); if (!gl) return false; // compile shaders const vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource( .........完整代码请登录后点击上方下载按钮下载查看
网友评论0