canvas 彩虹六边形条纹

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

let config = {
  useRandomValuesInstead: true,
  lineWidth: 3,
  nrOfStripes: 6,
  size: 42,
  colorWheelOffset: 0,
};

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;
    for(let rot = 0; rot < nrOfRotations; rot++) {
      ctx.rotate(angle);
      for(let i = 0; i < config.nrOfStripes + 1; i++) {
        let y1 = -this.R * i / config.nrOfStripes;
        let y2 = y1 + this.t / 2;
        ctx.beginPath();
        ctx.moveTo(0, y1);
        ctx.lineTo(this.r, y2);
        
        ctx.strokeStyle = this.calculateColor(this.x, this.y);
        ctx.stroke();
      }
    }
    ctx.restore();
  }
  
  calculateColor(x, y) {
    let deltax = w / 2 - x;
    let deltay = h / 2 - y;
    let angle = Math.atan2(deltay, deltax);
    let hue = angle * 180 / Math.PI + config.colorWheelOffset;

let dist = Math.sqrt(deltax * deltax + deltay * deltay);
    let saturation = dist/Math.min(w, h) * 100;
    return `hsl(${hue}, ${saturation}%, 50%)`;
  }
}

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.fillStyle = "black";
  ctx.lineWidth = config.lineWidth;
  ctx.lineCap = "round";
  ctx.lineJoin = "round";
  draw();
}

setup();

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