canvas实现聚烯烃动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现聚烯烃动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif; background-color: #ffe; margin:0; padding:0; border-width:0; overflow:hidden; } canvas { position: absolute; top: 0; left: 0; } div { position: absolute; top: 0; left: 0; width : 100vw; height: 100vh; transition: background-color 1.5s linear; } </style> </head> <body > <script > "use strict"; /* Author : Claude Chauvet (https://codepen.io/Dillo) /* very much inspired by mandala vı https://codepen.io/smlsvnssn/pen/VQwyJN by smlsvnssn (@smlsvnssn) */ window.addEventListener("load", function () { const mrandom = Math.random; const mfloor = Math.floor; const mround = Math.round; const mceil = Math.ceil; const mabs = Math.abs; const mmin = Math.min; const mmax = Math.max; const mPI = Math.PI; const mPIS2 = Math.PI / 2; const m2PI = Math.PI * 2; const msin = Math.sin; const mcos = Math.cos; const matan2 = Math.atan2; const mhypot = Math.hypot; const msqrt = Math.sqrt; let maxx, maxy; let repeat, nbPoly, polyodous; let tx, ty; // tables of cosines / sines let withBlur; /* ============================================================================ This hash function is based upon Johannes Baagoe's carefully designed and efficient hash function for use with JavaScript. It has a proven "avalanche" effect such that every bit of the input affects every bit of the output 50% of the time, which is good. See: http://baagoe.com/en/RandomMusings/hash/avalanche.xhtml ============================================================================ */ /* This function returns a hash function depending on a seed. if no seed is provided (or a falsy value), Math.random() is used. The returned function always returns the same number in the range [0..1[ for the sam.........完整代码请登录后点击上方下载按钮下载查看
网友评论0