蜂窝状图形变幻动画背景效果

代码语言:html

所属分类:背景

代码描述:蜂窝状图形变幻动画背景效果

代码标签: 动画 背景 效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
canvas{background:black}
body{overflow:hidden}
</style>

</head>
<body translate="no">
<canvas id="cnv">Please resize the window</canvas>

<script>
let rid = null;
const ctx = cnv.getContext("2d");
let cw = cnv.width = window.innerWidth;
let ch = cnv.height = window.innerHeight;

let r = Math.min(cw, ch) / 26;
let h = r * Math.cos(Math.PI / 6);

function circle(c, r) {
  ctx.globalCompositeOperation = "lighter";
  ctx.beginPath();
  ctx.arc(c.x, c.y, r, 0, 2 * Math.PI);
  ctx.strokeStyle = "hotpink";
  ctx.lineWidth = 2;
  ctx.stroke();
}

function HEX(r, n, R) {
  let ry = [];
  for (var i = 1; i <= 6; i++) {
    let o = {};
    o.x1 = r * Math.cos((i - 1) * Math.PI / 3);
    o.y1 = r * Math.sin((i - 1) * Math.PI / 3);
    o.x2 = r * Math.cos(i * Math.PI / 3);
    o.y2 = r * Math.sin(i * Math.PI / 3);
    ry.push(o);
  }
  ry.map(l => {
    div.........完整代码请登录后点击上方下载按钮下载查看

网友评论0