粒子开花canvas模拟动画效果
代码语言:html
所属分类:粒子
代码描述:粒子开花canvas模拟动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #333; padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden; position: relative; } </style> </head> <body translate="no"> <script> /** Pop Particles Just playing around with some function expression and declarations to make a particle display. Are JS classes bad, does this work just as well? Tried to not use 'this' and breakdown functions. click to add new pop's into the mix */ let surface; let animation; let points = []; let frame = 0; const setViewport = element => { const canvasElement = element; const dc = document.documentElement; const width = ~~(dc.clientWidth, window.innerWidth || 0); const height = ~~(dc.clientHeight, window.innerHeight || 0); canvasElement.width = width; canvasElement.height = height; }; const createCanvas = name => { const canvasElement = document.createElement("canvas"); canvasElement.id = name; setViewport(canvasElement); document.body.appendChild(canvasElement); surface = canvasElement.getContext("2d"); surface.scale(1, 1); return canvasElement; }; const resetCanvas = () => { setViewport(canvas); }; const canvas = createCanvas("canvas"); window.addEventListener("resize", resetCanvas); const getRandomPoint = radius => { const angle = Math.random() * Math.PI * 2; return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0