canvas实现五彩花朵粒子飞翔动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现五彩花朵粒子飞翔动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body,html{ background: #000; margin: 0; height: 100vh; overflow: hidden; } #c{ background:#fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> </head> <body > <canvas id=c> <script > c = document.querySelector('#c'); c.width = 1920; c.height = 1080; x = c.getContext('2d'); C = Math.cos; S = Math.sin; t = 0; T = Math.tan; rsz = window.onresize = () => { setTimeout(() => { if (document.body.clientWidth > document.body.clientHeight * 1.77777778) { c.style.height = '100vh'; setTimeout(() => c.style.width = c.clientHeight * 1.77777778 + 'px', 0); } else { c.style.width = '100vw'; setTimeout(() => c.style.height = c.clientWidth / 1.77777778 + 'px', 0); } }, 0); }; rsz(); async function Draw() { if (!t) { R = (Rl, Pt, Yw, m) => { M = Math; A = M.atan2; H = M.hypot; X = S(p = A(X, Y) + Rl) * (d = H(X, Y)); Y = C(p) * d; X = S(p = A(X, Z) + Yw) * (d = H(X, Z)); Z = C(p) * d; Y = S(p = A(Y, Z) + Pt) * (d = H(Y, Z)); Z = C(p) * d; if (m) { X += oX; Y += oY; Z += oZ; } }; Q = () => [c.width / 2 + X / Z * 800, c.height / 2 + Y / Z * 800]; Cylinder = (rw, cl, ls1, ls2) => { let a = []; for (let i = rw; i--;) { let b = []; for (let j = cl; j--;) { X = S(p = Math.PI * 2 / cl * j) * ls1; Y = (1 / rw * i - .5) * ls2; Z = C(p) * ls1; b = [...b, [X, Y, Z]]; } for (let j = cl; j--;) { b = []; X = S(p = Math.PI * 2 / cl * j) * ls1; Y = (1 / rw * i - .5) * ls2; Z = C(p) * ls1; b = [...b, [X, Y, Z]]; X = S(p = Math.PI * 2 / cl * (j + 1)) * ls1; Y = (1 / rw * i - .5) * ls2; Z = C(p) * ls1; b = [...b, [X, Y, Z]]; X = S(p = Math.PI * 2 / cl * (j + 1)) * ls1; Y = (1 / rw * (i + 1) - .5) * ls2; Z = C(p) * ls1; b = [...b, [X, Y, Z]]; X = S(p = Math.PI * 2 / cl * j) * ls1; Y = (1 / rw * (i + 1) - .5) * ls2; Z = C(p) * ls1; b = [...b, [X, Y, Z]]; a = [...a, b]; } } b = []; for (let j = cl; j--;) { X = S(p = Math.PI * 2 / cl * j) * ls1; Y = ls2 / 2; Z = C(p) * ls1; b = [...b, [X, Y, Z]]; } //a = [...a, b] return a; }; stroke = (scol, fcol, lwo = 1) => { if (scol) { x.closePath(); x.gl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0