无缝四分之一圈和半圈

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict";

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

//-----------------------------------------------------------------
function drawCell (kx, ky) {

let centre; // of quater circle
  let hc1; // side of diameter of half circle
  let hc2; // 'other' side
  let xc, yc, xhc, yhc;

let x = orgx + kx * side;
  let y = orgy + ky * side;

let cell = grid[ky][kx];
  if (cell[0] == cell[1]) centre = 3;
  else if (cell[1] == cell[2]) centre = 0;
  else if (cell[2] == cell[3]) centre = 1;
  else if (cell[3] == cell[0]) centre = 2;

xc = x + [0, 1, 1, 0][centre] * side;
  yc = y + [0, 0, 1, 1][centre] * side;

// choose side for half circle

if (intAlea(2)) {
    hc1 = centre;
    hc2 = (centre + 3) % 4;
  } else {
    hc2 = centre;
    hc1 = (centre + 3) % 4;
  }
  xhc = x + [0.5, 1, 0.5, 0][hc1] * side;
  yhc = y + [0, 0.5, 1, 0.5][hc1] * side;

ctx.fillStyle = colors[cell[(centre + 1) % 3]];
  ctx.fillRect(x, y, side, side);

// draw quater circle

ctx.beginPath();
  ctx.fillStyle = colors[cell[hc2]];
  ctx.moveTo(xc , yc );
  ctx.arc(xc, yc, side, centre * mPIS2, (centre + 1) * mPIS2);
  ctx.closePath();
  ctx.fill();

// draw half circle
  ctx.beginPath();
  ctx.fillStyle = colors[cell[hc1]];
  ctx.moveTo(xhc, yhc);
  ctx.arc(xhc , yhc, side / 2, hc1 * mPIS2, (hc1 + 2) * mPIS2);
  ctx.closePath();
  ctx.fill();

} // drawCell

//-----------------------------------------------------------------
function drawGrid() {

// draw tiles
  grid.forEach((line, ky) => {
    line.forEach((cell, kx) => {
      drawCell(kx, ky);
    }); //line.forEach
  }); //grid.forEach

} // drawGrid

//-----------------------------------------------------------------

let animate;
{ // scope for animate
  let animState = 0;

animate = function(tStamp) {
    let event = events.pop();
    requestAnimationFrame(animate)
    if (event) {
      switch (event.event) {
        case 'reset' :
          animState = 0;
          break;
      } // switch (event)
    } // if (event)

switch (animState) {
      case 0 :
        if (startOver()) ++animState;
    } // switch (animState)

} // animate

} // scope for animate

//-----------------------------------------------------------------
function startOver() {
// canvas dimensions

maxx = window.innerWidth;
  maxy = window.innerHeight;

let orgLeft = mmax (((window.innerWidth ) - maxx) / 2, 0);
  let orgTop = mmax (((window.innerHeight ) - maxy) / 2, 0);

canv.style.left = orgLeft + 'px';
  canv.style.top = orgTop + 'px';

if (maxx != canv.width) canv.width = maxx;
  if (maxy != canv.height) canv.height = maxy;

side = intAlea(sideMin, sideMax);
  nbx = mceil(maxx / side);
  nby = mceil(maxy / side);

if (nbx < 2 || nby < 2) return false; // not interesting

orgx = mround((maxx - nbx * side) / 2) ;
  orgy = mround((maxy - nby * side) / 2);

let hue = intAlea(360);
  colors = [
    `hsl(${hue},${intAlea(80,100)}%, ${intAlea(20,30)}%)`,
    `hsl(${hue},${intAlea(80,100)}%, ${intAlea(40,50)}%)`,
    `hsl(${hue},${intAlea(80,100)}%, ${intAlea(70,80)}%)`
            ]

createGrid();

drawGrid();

return true;
} // startOver

//-----------------------------------------------------------------
// beginning of execution

{
    canv = document.createElement('canvas');
    canv.style.position="absolute";
    document.body.appendChild(canv);
    ctx = canv.getContext('2d');
    canv.addEventListener('click', ()=>{events.push({event:'reset'});})
  } // canvas creation

events.push({event:'reset'});
  requestAnimationFrame(animate)
} // window.onload

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg