canvas彩色粒子转圈动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas彩色粒子转圈动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> </head> <body > <script> "use strict"; // Paul Slaymaker, paul25882@gmail.com const body = document.getElementsByTagName("body").item(0); body.style.background = "#000"; const TP = 2 * Math.PI; const CSIZE = 400; const ctx = (() => { let d = document.createElement("div"); d.style.textAlign = "center"; body.append(d); let c = document.createElement("canvas"); c.width = c.height = 2 * CSIZE; d.append(c); return c.getContext("2d"); })(); ctx.translate(CSIZE, CSIZE); ctx.rotate(TP / 4); onresize = () => { let D = Math.min(window.innerWidth, window.innerHeight) - 40; ctx.canvas.style.width = D + "px"; ctx.canvas.style.height = D + "px"; }; const getRandomInt = (min, max, low) => { if (low) { return Math.floor(Math.random() * Math.random() * (max - min)) + min; } else { return Math.floor(Math.random() * (max - min)) + min; } }; function start() { if (stopped) { requestAnimationFrame(animate); stopped = false; } else { stopped = true; } } ctx.canvas.addEventListener("click", start, false); var dashLength = 10; var rotOff = TP / 4; var stopped = true; var t = -200; function animate(ts) { if (stopped) return; t++; if (t % 300 == 0) { if (t % 1200 == 0) t = 0; reset(); } a = TP * t / 1200; if (t % 40 == 0) huex++; for (let i = 0; i < circles.length; i++) { let hue = (huex + Math.round(circles[i].hDiff * Math.pow(Math.sin(2 * a), 2))) % 360; circles[i].col = "hsl(" + hue + ",100%,50%)"; } draw(); requestAnimationFrame(animate); } const radius = 25; var circles = []; var cia = []; var Circle = function (x) { this.x = x; this.dmx = new DOMMatrix([1, 0, 0, 1, x, 0]); this.dmx2 = false; this.col = "hsl(" + huex + ",100%,50%)"; this.sf = 1; this.hDiff = 80; }; var huex = getRandomInt(0, 360); let wColor = "hsl(" + huex + ",100%,50%)"; for (let i = 0; i < 2 * CSIZE / radius - 1; i++) { circles.push(new Circle(-CSIZE + radius + i * radius)); cia.push(i); } var rots = [8, 10, 12, 14, 16, 18, 20, 22, -6, -10, -12, -14, -16, -18, 20, 22]; var sf = [-1, 1][getRandomInt(0, 2)]; var a = 0; let cc = 0; var createCognates = (i1, i2) => { let mp = (circles[i1].x + circles[i2].x) / 2; circles[i1].dmx.e = mp; circles[i1].dmx2 = new DOMMatrix([1, 0, 0, 1, (i1 - i2) * radius / 2, 0]); circles[i2].dmx.e = mp; circles[i2].dmx2 = new DOMMatrix([1, 0, 0, 1, (i2 - i1) * radius / 2, 0]); let rr = Math.abs(circles[i1].x - circles[i2].x); if (rr > 300) circles[i1].sf = [-2, 2][getRandomInt(0, 2)];else if (rr > 200) circles[i1].sf.........完整代码请登录后点击上方下载按钮下载查看
网友评论0