canvas实现瓷砖正方形布局效果-html代码-BFW代码库

canvas实现瓷砖正方形布局效果

代码语言：html

所属分类：背景

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

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

<style>
body, html {
  margin: 0;
}

canvas {
  display: block;
}
</style>

</head>
<body translate="no">
<canvas id="canvas"></canvas>

<script >


let canvas;
let ctx;
let w, h;
let config = {
  squareSize: 60,
  space: 4,
  lineWidth: 2,
};

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

function reset() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight; 
}

function draw() {
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, w, h);
  let size = config.squareSize;
  let dist = Math.sqrt(2 * size * size);
  for(let x = -dist; x < w + dist; x += dist) {
    for(let y = -1; y < h / dist * 2 + 1; y += 1) {
      let xOffset = 0;
      if(Math.abs(y) % 2 === 1) {
        xOffset = dist / 2;
      }
      drawLines(x + xOffset, y * dist / 2, size);
    }
  }
}

function setRandomRotationOnContext() {
  let sign =.........完整代码请登录后点击上方下载按钮下载查看