html5+canvas如何做一个彩色六角菱形背景

如何利用html5和canvas做一个彩色六角菱形背景效果，下面web建站小编给大家详细介绍一下具体代码！

html代码：

<canvas id="canvas"></canvas>

js代码：

let canvas;
let ctx;
let w, h;
let hexagons;

class Hexagon {
  constructor(x, y, R) {
    this.x = x;
    this.y = y;
    this.R = R;
  }

  draw() {
    let baseHue = Math.random() * 360;
    ctx.save();
    ctx.translate(this.x, this.y);
    let angle = Math.PI * 2 / 3;
    let nrOfRotations = 3;
    let a = Math.PI / 6;
    for (let rot = 0; rot < nrOfRotations; rot++) {
      ctx.rotate(angle);

      setColor(baseHue);
      ctx.beginPath();
      ctx.moveTo(0, 0);
      let x1 = Math.cos(Math.PI / 3 + a) * this.R;
      let y1 = Math.sin(Math.PI / 3 + a) * this.R;
      ctx.lineTo(x1, y1);
      let x2 = Math.cos(a) * this.R;
      let y2 = Math.sin(a) * this.R;
      ctx.lineTo(x2, y2);
      ctx.lineTo(0, 0);
      ctx.fill();
      //ctx.stroke();

      setColor(baseHue);
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(x2, y2);
      let x3 = Math.cos(-Math.PI / 3 + a) * this.R;
      let y3 = Math.sin(-Math.PI / 3 + a) * this.R;
      ctx.lineTo(x3, y3);
      ctx.lineTo(0, 0);
      ctx.fill();
      //ctx.stroke();
    }
    ctx.restore();
  }}


function setup() {
  canvas = document.querySelector("#canvas");
  ctx = canvas.getContext("2d");
  window.addEventListener("resize", () => {
    resize();
    draw();
  });
  canvas.addEventListener("click", draw);
  resize();
}

function setColor(baseHue) {
  let hueOffset = Math.random() * 5;
  let h = baseHue + hueOffset;
  let s = Math.random() * 5 + 40;
  let l = Math.random() * 10 + 60;
  let color = `hsl(${h}, ${s}%, ${l}%)`;
  ctx.strokeStyle = color;
  ctx.fillStyle = color;
}

function resize() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
}

function setupHexagons() {
  hexagons = [];
  let r = Math.random() * 80 + 20;
  let R = r / Math.cos(Math.PI / 6);
  let t = r * 2 / Math.sqrt(3);
  let rows = w / (r * 2) + 1;
  let cols = h / R;
  for (let x = 0; x < rows; x++) {
    for (let y = 0; y < cols; y++) {
      let xOffset = y % 2 === 0 ? r : 0;
      let xPixel = r * x * 2 + xOffset;
      let yPixel = (t / 2 + R) * y;
      let hexagon = new Hexagon(xPixel, yPixel, R);
      hexagons.push(hexagon);
    }
  }
}

function draw() {
  ctx.fillStyle = "grey";
  ctx.fillRect(0, 0, w, h);
  setupHexagons();
  hexagons.forEach(h => {
    h.draw();
  });
}

setup();
draw();

本文链接：http://so.lmcjl.com/news/10042/