无缝四分之一圆和半圆背景效果
代码语言: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"; /* Inspired by Johan Karlsson'n pen Quarter Circle and Half a Circle https://codepen.io/DonKarlssonSan/details/abvRErd vertices are numberered 0 (NW), 1(NE), 2(SE) and 3(SW) sides are numered 0(N), 1(E), 2(S) and 3(W) */ window.onload = function () { const sideMin = 50; const sideMax = 120; let canv, ctx; // canvas and context let maxx, maxy; let side; // side of square let nbx, nby; // number of squares in width / height let orgx, orgy; // coordinates of top left corner of grid[0][0] let grid; let colors; /* 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 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 createGrid() { /* attribute color 0, 1 or 2 to every square side so that : - each square uses the 3 colors (two are use once, one is used twice on sides of a same vertex) - matching sides of neighbour square are the same color */ let elem; grid = []; for (let ky = 0; ky < nby; ++ky) { grid[ky] = []; for (let kx = 0; kx < nbx; ++kx) { grid[ky][kx] = elem = []; // copy constraint from neighbours if (ky > 0) elem[0] = grid[ky - 1][kx][2]; if (kx > 0) elem[3] = grid[ky][kx - 1][1]; // fill two first sides in not constrained if (elem[0] === undefined) elem[0] = intAlea(3); if (elem[3] === undefined) elem[3] = intAlea(3); // if equal, give other possible values to other sides if (elem[0] == elem[3]) { let a = (elem[0] + 1) % 3; let b = (elem[0] + 2) % 3; if (intAlea(2)) { elem[1] = a;elem[2] = b; } else { elem[2] = a;elem[1] = b; } } else {// two first sides different // pick thirs value let ov = 0; while (ov == elem[0] || ov == elem[3]) ++ov; // pick value to use twice let tut = intAlea(3); if (tut == ov) { elem[1] = elem[2] = tut; } else { if (tut == elem[3]) { elem[2] = tut; // same as on side 3 elem[1] = ov; // other color } else { elem[1] = tut; // same as on side 0 elem[2] = ov; // other color } } } // if two first sides different } // kx } // ky } // createGrid //---------------------------------.........完整代码请登录后点击上方下载按钮下载查看
网友评论0