canvas绘制多彩线条排列效果代码-html代码-BFW代码库

canvas绘制多彩线条排列效果代码

代码语言：html

所属分类：其他

代码描述：canvas绘制多彩线条排列效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
body,
#canvas {
  background-color: #111;
  color: white;
  overflow: hidden;
}

a.labs-follow-me-twitter {
  position: absolute;
  top: unset;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  place-items: center;
}
a.labs-follow-me-twitter svg {
  transform: scale(1.5);
}
</style>




</head>

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

      <script >
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const getRandomInt = max => Math.floor(Math.random() * max);
const lineWidth = 2;
const gap = 5;
const colorPool = [
"#3B82F6",
"#B25FEA",
"#5D5CDE",
"#5E5CDD",
"#EB5545",
"#F8D74A",
"#6BD35E",
"#F8D74A",
"#F1A33C",
"#7EBED6",
"#98989C",
"#EB4A63"];

const circleSize = 4;
const circleLineWidth = 3;
const circleCountPool = [0, 0, 0, 0, 1, 0, 0, 0, 0, 3, 0, 0, 0];

let reducedColorPool = [...colorPool];

const getColor = () => {
  if (reducedColorPool.length === 0) {
    reducedColorPool = [...colorPool];
  }
  return reducedColorPool.splice(getRandomInt(reducedColorPool.length), 1)[0];
};

const render = () => {
  const w = window.innerWidth;
  const h = window.innerHeight;
  ctx.clearRect(0, 0, w, h);
  ctx.fillStyle = '#111';
  ctx.fillRect(0, 0, w, h);
  const lineCount = Math.round(w / lineWidth / gap);
  for (let i = 0; i < lineCount; i++) {
    // line
    const c = getColor();
    const curveY = (lineCount - 1 - i) * gap;
    let curveYDistance = 10;
    const lineX = gap + i * lineWidth * gap;
    const lineY = curveY + curveYDistance * 6;
    ctx.fillStyle = c;
    ctx.fillRect.........完整代码请登录后点击上方下载按钮下载查看