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: #000; margin:0; padding:0; border-width:0; } </style> </head> <body translate="no"> <script > "use strict"; /**** parameters you should try to modify */ const minRadius = 25; const maxRadius = 150; const margin = 2; // minimum distance between 2 circles /**** modifications beyond this line at your own risk */ let canv, ctx; let maxx, maxy; // canvas sizes (in pixels) let circles; let events = []; // shortcuts for Math.… 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; const rac3 = msqrt(3); const rac3s2 = rac3 / 2; const mPIS3 = Math.PI / 3; //----------------------------------------------------------------------------- // miscellaneous functions //----------------------------------------------------------------------------- function alea(min, max) { // random number [min..max[ . If no max is provided, [0..min[ if (typeof max == 'undefined') return min * mrandom(); return min + (max - min) * mrandom(); } // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function intAlea(min, max) { // random integer number [min..max[ . If no max is provided, [0..min[ if (typeof max == 'undefined') { max = min;min = 0; } return mfloor(min + (max - min) * mrandom()); } // intAlea // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function arrayShuffle(array) { /* randomly changes the order of items in an array only the order is modified, not the elements */ let k1, temp; for (let k = array.length - 1; k >= 1; --k) { k1 = intAlea(0, k + 1); temp = array[k]; array[k] = array[k1]; array[k1] = temp; } // for k return array; } // arrayShuffle // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function randomOrder(range) { /* returns an array with numbers 0..range-1 in random order */ let array = []; for (let k = 0; k < range; ++k) array[k] = k; return arrayShuffle(array); } // randomOrder // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function randomElement(array) { return array[intAlea(array.length)]; } // randomElement // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /* returns intermediate value between v0 and v1, alpha = 0 will return v0, alpha = 1 will return v1 values of alpha outside [0,1] may be used to compute points outside the v0-v1 range */ function lerp(v0, v1, alpha) { return (1 - alpha) * v0 + alpha * v1; } // function lerp; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /* returns point based on : - an origin point - a distance - a direction given by two coordinates */ function dirPoint(porg, dist, dir) { let distDir = mhypot(dir[0], dir[1]); return [porg[0] + dist * dir[0] / distDir, porg[1] + dist * dir[1] / distDir]; } // function dirPoint; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /* returns two coordinates representing move from porg to pend */ function diffPoints(porg, pend) { return [pend[0] - porg[0], pend[1] - porg[1]]; } // function diffPoints; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function sumPoints(pa, pb) { return [pa[0] + pb[0], pa[1] + pb[1]]; } // function sumPoints; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /* returns intermediate point between p0 and p1, alpha = 0 will return p0, alpha = 1 will return p1 values of alpha outside [0,1] may be used to compute points outside the p0-p1 segment */ function intermediate(p0, p1, alpha) { return [(1 - alpha) * p0[0] + alpha * p1[0], (1 - alpha) * p0[1] + alpha * p1[1]]; } // function intermediate // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function length(p0, p1) { /* distance between points */ return mhypot(p0[0] - p1[0], p0[1] - p1[1]); } // function length // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /* find first occurence of element in array returns index if found returns -1 if not found but safe == true throws error if not found and safe == false */ function findIndex(array, element, safe = false) { let idx = array.indexOf(ele.........完整代码请登录后点击上方下载按钮下载查看
网友评论0