canvas实现蜂窝六边形背景效果代码-html代码-BFW代码库

canvas实现蜂窝六边形背景效果代码

代码语言：html

所属分类：背景

代码描述：canvas实现蜂窝六边形背景效果代码，滑动条可调整密度与大小

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

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

<head>
  <meta charset="UTF-8">

  
  
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body, canvas {
    height: 100%;
    width: 100%;
}

body {
    background: #121212;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

#zoomSlider {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    z-index: 10;
}
</style>

  
</head>

<body>
    <canvas id="hexCanvas"></canvas>
    <input type="range" id="zoomSlider" min="1" max="10" value="1" step="0.1">

  
      <script>
// Variables for hexagon grids
const HEX_GAP = 0; // No gap to ensure alignment
const HEX_HLW = 2; // Hex line width

// Colors for the grids
const COLORS = ['#ff0066', '#00ccff', '#66ff66', '#ffcc00', '#cc66ff']; // Different colors for each level of hexagons

const canvas = document.getElementById('hexCanvas');
const ctx = canvas.getContext('2d');
const zoomSlider = document.getElementById('zoomSlider');

let zoomLevel = 1; // Start at the lowest zoom level

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

// Draw a single hexagon
function drawHexagon(x, y, radius, color) {
    ctx.beginPath();
    for (let i = 0; i < 6; i++) {
        const angle = Math.PI / 3 * i;
        const x_i = x + radius * Math.cos(a.........完整代码请登录后点击上方下载按钮下载查看