浮雕中的六角弧背景动画效果
代码语言:html
所属分类:背景
代码描述:浮雕中的六角弧背景动画效果
下面为部分代码预览,完整代码请点击下载或在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; color: #fff; margin: 0; padding: 0; border-width:0; cursor: pointer; } </style> </head> <body translate="no"> <script> "use strict"; window.onload = function () { const rayHexMin = 80; const rayHexMax = 160; const amplNoise = 30; const minPerX = 1; const maxPerX = 5; const minPerY = 1; const maxPerY = 5; let canv, ctx; // canvas and context let maxx, maxy; let grid; let nbx, nby; let rayHex; let tbSides; /* for animation */ 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; //----------------------------------------------------------------- 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 Noise1DOneShot(period, min = 0, max = 1, random) { /* returns a 1D single-shot noise generator. the (optional) random function must return a value between 0 and 1 the returned function has no parameter, and will return a new number every tiime it is called. If the random function provides reproductible values (and is not used elsewhere), this one will return reproductible values too. period should be > 1. The bigger period is, the smoother output noise is */ random = random || Math.random; let currx = random(); // start with random offset let y0 = min + (max - min) * random(); // 'previous' value let y1 = min + (max - min) * random(); // 'next' value let dx = 1 / period; return function () { currx += dx; if (currx > 1) { currx -= 1; y0 = y1; y1 = min + (max - min) * random(); } let z = (3 - 2 * currx) * currx * currx; return z * y1 + (1 - z) * y0; }; } // Noise1DOneShot //------------------------------------------------------------------------ // class Hexagon let Hexagon; {// scope for Hexagon let orgx, orgy; Hexagon = function (kx, ky) { this.kx = kx; this.ky = ky; this.neighbours = []; this.orient = intAlea(6); }; // function Hexagon // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /* static method */ Hexagon.dimensions = function () { // coordinates of center of hexagon [0][0] orgx = (maxx - rayHex * (1.5 * nbx + 0.5)) / 2 + rayHex; // obvious, no ? orgy = (maxy - rayHex * rac3 * (nby + 0.5)) / 2 + rayHex * rac3; // yet more obvious }; // Hexagon.dimensions // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Hexagon.prototype.size = function () { /* computes screen sizes / positions */ // centre this.xc = orgx + this.kx * 1.5 * rayHex; this.yc = orgy + this.ky * rayHex * rac3; if (this.kx & 1) this.yc -= rayHex * rac3s2; // odd columns this.vertices = [[], [], [], [], [], []]; // x coordinates, from left to right this.vertices[3][0] = this.xc - rayHex; this.vertices[2][0] = this.vertices[4][0] = this.xc - rayHex / 2; this.vertices[1][0] = this.vertices[5][0] = this.xc + rayHex / 2; this.vertices[0][0] = this.xc + rayHex; // y coordinates, from top to bottom this.vertices[4][1] = this.vertices[5][1] = this.yc - rayHex * rac3s2; this.vertices[0][1] = this.vertices[3][1] = this.yc; this.vertices[1][1] = this.vertices[2][1] = this.yc + rayHex * rac3s2; // get a 2nd copy of table to avoid many % 6 calculations later this.vertices = this.vertices.concat(this.vertices); this.extCenters = [[], [], [], [], [], []]; let dxc = rayHex; let dyc = rayHex / rac3; this.rad1 = dyc; // radius fir circles with center in extCenters for (let k = 0; k < 6; ++k) { this.extCenters[k][0] = this.xc + dxc * mcos(k * mPIS3) - dyc * msin(k * mPIS3); this.extCenters[k][1] = this.yc + dxc * msin(k * mPIS3) + dyc * mcos(k * mPIS3); } // get a 2nd copy of table to avoid many % 6 calculations later this.extCenters = this.extCenters.concat(this.extCenters); this.extCentersB = [[], [], [], [], [], []]; // x coordinates, from left to right this.extCentersB[3][0] = this.xc - 2 * rayHex; this.extCentersB[2][0] = this.extCentersB[4][0] = this.xc - rayHex; this.extCentersB[1][0] = this.extCentersB[5][0] = this.xc + rayHex; this.extCentersB[0][0] = this.xc + 2 * rayHex; // y coordinates, from top to bottom this.extCentersB[4][1] = this.extCentersB[5][1] = this.yc - rayHex * rac3; this.extCentersB[3][1] = this.extCentersB[0][1] = this.yc; this.extCentersB[2][1] = this.extCentersB[1][1] = this.yc + rayHex * rac3; // get a 2nd copy of table to avoid many % 6 calculations later this.extCentersB = this.extCentersB.concat(this.extCentersB); }; // Hexagon.prototype.size // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Hexagon.prototype.drawHexagon = function (hue) { if (!this.vertices) this.size(); let ctxGrid = ctx; ctxGrid.beginPath(); ctxGrid.moveTo(this.vertices[0][0], this.vertices[0][1]); ctxGrid.lineTo(this.vertices[1][0], this.vertices[1][1]); ctxGrid.lineTo(this.vertices[2][0], this.vertices[2][1]); ctxGrid.lineTo(this.vertices[3][0], this.vertices[3][1]); ctxGrid.lineTo(this.vertices[4][0], this.vertices[4][1]); ctxGrid.lineTo(this.vertices[5][0], this.vertices[5][1]); ctxGrid.lineTo(this.vertices[0][0], this.vertices[0][1]); ctxGrid.strokeStyle = '#8FF'; ctxGrid.lineWidth = 0.5; ctxGrid.strokeStyle = `hsl(${hue},100%,60%)`; ctxGrid.stroke(); }; // Hexagon.prototype.drawHexagon // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Hexagon.prototype.drawArc1 = function (vert, alpha, first = false) { let x0, y0, xc, yc, R; xc = x0 = rayHex * (1 - alpha / 2); y0 = alpha * rayHex * rac3s2; yc = xc / rac3; R = rayHex * (1 - 2 * alpha) / rac3; [x0, y0] = rotate([x0, y0], 2 * vert); [xc, yc] = rotate([xc, yc], 2 * vert); if (first) ctx.moveTo(this.xc + x0, this.yc + y0); ctx.arc(this.xc + xc, this.yc + yc, R, (2 * vert - 3) * mPI / 6, (2 * vert + 5) * mPI / 6, true); }; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Hexagon.prototype.drawArc6 = function (vert, alpha, first = false) { let x0, y0, xc, yc, R; xc = x0 = rayHex * (1 - alpha / 2); y0 = -alpha * rayHex * rac3s2; yc = -xc / rac3; R = rayHex * (1 - 2 * alpha) / rac3; [x0, y0] = rotate([x0, y0], 2 * vert); [xc, yc] = rotate([xc, yc], 2 * vert); if (first) ctx.moveTo(this.xc + x0, this.yc + y0); ctx.arc(this.xc + xc, this.yc + yc, R, (2 * vert + 3) * mPI / 6, (2 * vert - 5) * mPI / 6); }; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Hexagon.prototype.drawArc2 = function (vert, alpha, first = false) { let x0, y0, xc, yc, R, angle; xc = x0 = rayHex; y0 = 0; yc = ((0.5 + alpha) * (0.5 + alpha) + 0.75) / rac3 * rayHex; R = yc; angle = matan2(rayHex * (1 / 2 + alpha), yc - rayHex * rac3s2); [x0, y0] = rotate([x0, y0], 2 * vert); [xc, yc] = rotate([xc, yc], 2 * vert); if (first) ctx.moveTo(this.xc + x0, this.yc + y0); ctx.arc(this.xc + xc, this.yc + yc, R, (2 * vert - 3) * mPI / 6, (2 * vert - 3) * mPI / 6 - angle, true); }; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Hexagon.prototype.drawArc7 = function (vert, alpha, first = false) { let x0, y0, xc, yc, R, angle; x0 = rayHex * (0.5 - alpha); y0 = rayHex * rac3s2; xc = rayHex; yc = ((0.5 + alpha) * (0.5 + alpha) + 0.75) / rac3 * rayHex; R = yc; angle = matan2(rayHex * (1 / 2 + alpha), yc - rayHex * rac3s2); [x0, y0] = rotate([x0, y0], 2 * vert); [xc, yc] = rotate([xc, yc], 2 * vert); if (first) ctx.moveTo(this.xc + x0, this.yc + y0); ctx.arc(this.xc + xc, this.yc + yc, R, (2 * vert - 3) * mPI / 6 - angle, (2 * vert - 3) * mPI / 6); }; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Hexagon.prototype.drawArc3 = function (vert, alpha, first = false) { let x0, y0, xc, yc, R, xb, yb, angle; xc = x0 = rayHex; y0 = 0; xb = rayHex * (-1 / 2 - alpha / 2); yb = (1 - alpha) * rac3s2 * rayHex; yc = (yb * yb + xb * xb - x0 * x0 + 2 * x0 * xc - 2 * xb * xc) / 2 / yb; R = yc; angle = matan2(rayHex - xb, yc - yb); [x0, y0] = rotate([x0, y0], 2 * vert); [xc, yc] = rotate([xc, yc], 2 * vert); if (first) ctx.moveTo(this.xc + x0, this.yc + y0); ctx.arc(this.xc + xc, this.yc + yc, R, (2 * vert - 3) * mPI / 6, (2 * vert - 3) * mPI / 6 - angle, true); }; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Hexagon.prototype.drawArc8 = function (vert, alpha, first = false) { let x0, y0, xc, yc, R, xb, yb, angle; x0 = -(1 + alpha) / 2 * rayHex; y0 = (1 - alpha) * rac3s2 * rayHex; xc = rayHex; xb = rayHex * (-1 / 2 - alpha / 2); yb = (1 - alpha) * rac3s2 * rayHex; yc = (yb * yb + xb * xb - rayHex * rayHex + 2 * rayHex * xc - 2 * xb * xc) / 2 / yb; R = yc; angle = matan2(rayHex - xb, yc - yb); [x0, y0] = rotate([x0, y0], 2 * vert); [xc, yc] = rotate([xc, yc], 2 * vert); if (first) ctx.moveTo(this.xc + x0, this.yc + y0); ctx.arc(this.xc + xc, this.yc + yc, R, (2 * vert - 3) * mPI / 6 - angle, (2 * vert - 3) * mPI / 6); }; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Hexagon.prototype.drawArc4 = function (vert, alpha, first = false) { let.........完整代码请登录后点击上方下载按钮下载查看
网友评论0