圆角三角形背景效果
代码语言: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; margin:0; padding:0; border-width:0; } </style> </head> <body translate="no"> <script > "use strict"; window.addEventListener("load", function () { /* constants to play with */ const limBiTri = 150; const dHue = 40; const halfMargin = 3; // px for space between triangles const roundRadius = 10; /* halfMargin and roundRadius should be kept positive and small with respect to limBiTri or insconsistency issues may arise */ /* modifications beyond this line at your own risks */ let canv, ctx; // canvas and context : global variables (I know :( ) let maxx, maxy; // canvas sizes (in pixels) let hueMono; let monochrome; let bt0, bt1, bt2; let prevTri, currTri; // shortcuts for Math.… const mrandom = Math.random; const mhypot = Math.hypot; const matan2 = Math.atan2; const mabs = Math.abs; //----------------------------------------------------------------------------- // 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(); } // alea // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function isPositiveRot(p0, p1, p2) { // returns true if turn positively going from p0 to p1 to p2 let dx0 = p1[0] - p0[0]; let dy0 = p1[1] - p0[1]; let dx1 = p2[0] - p1[0]; let dy1 = p2[1] - p1[1]; return dx0 * dy1 - dx1 * dy0 >= 0; } // isPositiveRot // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function projection(p0, p1, p) { // returns projection of p on (p0, p1) let [x0, y0] = p0; let [x1, y1] = p1; let [x, y] = p; let dx = x1 - x0; let dy = y1 - y0; let xproj, yproj; let det = -dx * dx - dy * dy; let c0 = x * dx + y * dy; let c1 = x0 * dy - y0 * dx; xproj = (-c0 * dx - c1 * dy) / det; yproj = (c1 * dx - c0 * dy) / det; return [xproj, yproj]; } // projection // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function intersect(p0, p1, p2, p3) { /* computes intersection of lines (p0, p1) and (p2, p3) (even if not in line segments) returns false if lines are parallel */ let [x0, y0] = p0; // let x2 = this.p1.x; // let y2 = this.p1.y; let [x2, y2] = p2; // let x4 = autreSegment.p1.x; // let y4 = autreSegment.p1.y; let dx0 = p1[0] - p0[0]; let dy0 = p1[1] - p0[1]; let dx2 = p3[0] - p2[0]; let dy2 = p3[1] - p2[1]; let deter = dy0 * dx2 - dx0 * dy2; if (mabs(deter) < 1e-30) return false; let xs = x0 * dy0 * dx2 - x2 * dx0 * dy2 + (y2 - y0) * dx0 * dx2; xs /= deter; // y is computed like x, exchanging x and y (which changes the sign of deter)) let ys = y0 * dx0 * dy2 - y2 * dy0 * dx2 + (x2 - x0) * dy0 * dy2; ys = -ys / deter; return [xs, ys]; } // intersect // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function parallelSegment(p0, p1, dist) { /* input : two distinct points and a distance returns a segment parallel to (p0, p1) as two points this segment is at a distance dist from (p0, p1) on the right side (dist > 0) or left side (dist < 0) of (p0, p1) (when moving from p0 to p1) projection of 1st returned point on (p0, p1) is p0; projection of 2nd returned point on (p0, p1) is p1; */ let dx = p1[0] - p0[0]; let dy = p1[1] - p0[1]; let lng = mhypot(dx, dy) / dist; let dxn = dx / lng; let dyn = dy / lng; let pp0 = [p0[0] - dyn, p0[1] + dxn]; let pp1 = [p1[0] - dyn, p1[1] + dxn]; return [pp0, pp1]; } // parallelSegment //----------------------------------------------------------------------------- /* splittable, oriented segment */ function Side(p0, p1) { this.p0 = p0; this.p1 = p1; this.length = mhypot(p1[0] - p0[0], p1[1] - p0[1]); } // Side // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Side.prototype.split = function () { let coeff = alea(0.5 - 0.1, 0.5 + 0.1); let nCoeff = 1 - coeff; let pm = [nCoeff * this.p0[0] + coeff * this.p1[0], nCoeff * this.p0[1] + coeff * this.p1[1]]; this.head = new Side(this.p0, pm); this.tail = new Side(pm, this.p1); }; // //----------------------------------------------------------------------------- function BiTri(side0, side1, side2, reverse0, reverse1, reverse2, enforce) { /* parameter used to enforce division beyond limBiTri on mousemove */ let tris = []; this.side0 = side0; this.side1 = side1; this.side2 = side2; this.reverse0 = reverse0; this.reverse1 = reverse1; this.reverse2 = reverse2; if (!enforce) { if (side0.length < limBiTri) return; if (side1.length < limBiTri) return; if (side2.length < limBiTri) return; } // put all elements in tri, with longest side in the middle if (side0.length > side1.length) { if (side0.length > side2.length) {// side 0 longest tris = [side2, side0, side1, reverse2, reverse0, reverse1]; } else {// side 2 longest tris = [side1, side2, side0, reverse1, reverse2, reverse0]; } } else { if (side2.length > side1.length) {// side 2 longest tris = [side1, side2, side0, reverse1, reverse2, reverse0]; } else {// side1 longest tris = [side0, side1, side2, reverse0, reverse1, reverse2]; } } if (!tris[1].head) tris[1].split(); // split longest side if needed let ns0 = this.ns0 = new Side(tris[3] ? tris[0].p1 : tris[0].p0, tris[1].head.p1); // split main triangle into 2 smaller ones this.t0 = new BiTri(tris[0], tris[4] ? tris[1].tail : tris[1].head, ns0, tris[3], tris[4], true); this.t1 = new BiTri(ns0, tris[4] ? tris[1].he.........完整代码请登录后点击上方下载按钮下载查看
网友评论0