canvas彩虹立方

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

/*
  Johan Karlsson, 2020
  https://twitter.com/DonKarlssonSan
  MIT License, see Details View
*/

let config = {};
let canvas;
let ctx;
let w, h;
let hexagons;

class Hexagon {
  constructor(x, y, R, r, t) {
    this.x = x;
    this.y = y;
    this.R = R;
    this.r = r;
    this.t = t;
  }
  
  draw() {
    ctx.save();
    ctx.translate(this.x, this.y);
    let angle = Math.PI * 2 / 3;
    let nrOfRotations = 3;
    let a = Math.PI / 6;
    let hue = Math.random() * 360;
    for(let rot = 0; rot < nrOfRotations; rot++) {
      ctx.rotate(angle);
      let s = config.saturation;
      let l = 20 + rot * 20;
      let color = `hsl(${hue}, ${s}%, ${l}%)`;
      ctx.fillStyle = color;
      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);
      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.closePath();
      ctx.fill();
      ctx.stroke();
    }
    ctx.restore();
  }
}

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

function resize() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  ctx.lineCap = "round";
  ctx.lineJoin = "round";
  ctx.strokeStyle = "rgba(40, 40, 40, 0.6)";
  draw();
}

function draw() {
  config.size = Math.random() * 80 + 25;
  ctx.lineWidth = config.size / 100;
  config.saturation = Math.random() * 40 + 60;
  setupHexagons();
  hexagons.forEach(h => {
    h.draw();
  });
}

setup();

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