canvas模拟月球表面石坑渐变效果
代码语言:html
所属分类:背景
代码描述:canvas模拟月球表面石坑渐变效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body translate="no"> <script> "use strict"; /**** parameters you should try to modify */ const minRadius = 7; const maxRadius = 100; const margin = 3; // 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 letConcentric; let events = []; let mouse = {}; // 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 length(p0, p1) { /* distance between points */ return mhypot(p0[0] - p1[0], p0[1] - p1[1]); } // function length //----------------------------------------------------------------------------- function Circle(x, y, radius) { this.c = [x, y]; this.radius = radius; } // Circle // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Circle.prototype.draw = function (col1, col2) { let x0, y0, x1, y1; x0 = this.c[0]; y0 = this.c[1] - this.radius; x1 = this.c[0]; y1 = this.c[1] + this.radius; let linGrad = ctx.createLinearGradient(x0, y0, x1, y1); linGrad.addColorStop(0, col1); linGrad.addColorStop(1, col2); ctx.beginPath(); ctx.arc(this.c[0], this.c[1], this.radius, 0, m2PI); ctx.fillStyle = linGrad; ctx.fill(); }; // //------------------------------------------------------------------------ function createCircles() { let x, y, maxRad, d; letConcentric = mouse.y > maxy / 2; let limit = minRadius + margin; circles = []; // initially empty let failcnt = 0; retry: while (circles.length < 5000) { failcnt++; if (failcnt > 100) break; // 100 unsuccessful tries, give up x = alea(maxx); y = alea(maxy); maxRad = x; maxRad = mmin(maxRad, maxx - x); maxRad = mmin(maxRad, y); maxRad = mmin(maxRad, maxy - y); if (maxRad < limit) continue retry; for (let k = 0; k < .........完整代码请登录后点击上方下载按钮下载查看
网友评论0