canvas人字形随机背景

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

let canvas;
let ctx;
let w, h;
let colors;

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

function reset() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  ctx.shadowColor = "black";
  ctx.shadowOffsetX = 5;
  ctx.shadowOffsetY = 8;
}

function setupColors() {
  colors = [
  //https://coolors.co/9c89b8-f0a6ca-efc3e6-f0e6ef-b8bedd
  [
  "#9c89b8",
  "#f0a6ca",
  "#efc3e6",
  "#f0e6ef",
  "#b8bedd"],

//https://coolors.co/f2d7ee-d3bcc0-a5668b-69306d-0e103d
  [
  "#f2d7ee",
  "#d3bcc0",
  "#a5668b",
  "#69306d",
  "#0e103d"],

//https://coolors.co/7bdff2-b2f7ef-eff7f6-f7d6e0-f2b5d4
  [
  "#7bdff2",
  "#b2f7ef",
  "#eff7f6",
  "#f7d6e0",
  "#f2b5d4"],

//
  [
  "#d3f8e2",
  "#e4c1f9",
  "#f694c1",
  "#ede7b1",
  "#a9def9"],

//https://coolors.co/fe938c-e6b89c-ead2ac-9cafb7-4281a4
  [
  "#fe938c",
  "#e6b89c",
  "#ead2ac",
  "#9cafb7",
  "#4281a4"],

//https://coolors.co/5bc0eb-fde74c-9bc53d-e55934-fa7921
  [
  "#5bc0eb",
  "#fde74c",
  "#9bc53d",
  "#e55934",
  "#fa7921"],

//https://coolors.co/0b132b-1c2541-3a506b-5bc0be-6fffe9
  [
  "#0b132b",
  "#1c2541",
  "#3a506b",
  "#5bc0be",
  "#6fffe9"],

//https://coolors.co/114b5f-1a936f-88d498-c6dabf-f3e9d2
  [
  "#114b5f",
  "#1a936f",
  "#88d498",
  "#c6dabf",
  "#f3e9d2"]];

}

function getRandomTheme() {
  let randomIndex = Math.floor(Math.random() * colors.length);
  let theme = colors[randomIndex];
  return theme;
}

setup();
draw();

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