Canvas六边形列阵背景 —— 密恐慎入！

2024-02-04 11:17:16

好的，以下是您要求的文章：

引言

作为一个前端，在闲暇时总喜欢玩一下Canvas。继上次中秋节活动中记录星空月亮的美后，这次决定来点刺激的，尝试一下密恐慎入的六边形列阵背景。

内容

首先，我们需要创建一个新的HTML文档，并在其中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>

  <script>
    // 获取canvas元素
    var canvas = document.getElementById("canvas");

    // 获取canvas的上下文
    var ctx = canvas.getContext("2d");

    // 设置画布背景色
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 六边形边长
    var sideLength = 10;

    // 六边形间距
    var spacing = 5;

    // 六边形行列数
    var rows = 10;
    var cols = 10;

    // 绘制六边形
    for (var i = 0; i < rows; i++) {
      for (var j = 0; j < cols; j++) {
        // 计算六边形中心点坐标
        var x = sideLength * (j + 0.5) + spacing * j;
        var y = sideLength * (i + 0.5) + spacing * i;

        // 绘制六边形
        ctx.beginPath();
        ctx.moveTo(x + sideLength / 2, y - sideLength / 2);
        ctx.lineTo(x + sideLength, y);
        ctx.lineTo(x + sideLength / 2, y + sideLength / 2);
        ctx.lineTo(x - sideLength / 2, y + sideLength / 2);
        ctx.lineTo(x - sideLength, y);
        ctx.lineTo(x - sideLength / 2, y - sideLength / 2);
        ctx.closePath();
        ctx.fillStyle = "#fff";
        ctx.fill();
      }
    }
  </script>
</body>
</html>

接下来，我们需要在script标签中添加以下代码来绘制六边形列阵：

// 六边形边长
var sideLength = 10;

// 六边形间距
var spacing = 5;

// 六边形行列数
var rows = 10;
var cols = 10;

// 绘制六边形
for (var i = 0; i < rows; i++) {
  for (var j = 0; j < cols; j++) {
    // 计算六边形中心点坐标
    var x = sideLength * (j + 0.5) + spacing * j;
    var y = sideLength * (i + 0.5) + spacing * i;

    // 绘制六边形
    ctx.beginPath();
    ctx.moveTo(x + sideLength / 2, y - sideLength / 2);
    ctx.lineTo(x + sideLength, y);
    ctx.lineTo(x + sideLength / 2, y + sideLength / 2);
    ctx.lineTo(x - sideLength / 2, y + sideLength / 2);
    ctx.lineTo(x - sideLength, y);
    ctx.lineTo(x - sideLength / 2, y - sideLength / 2);
    ctx.closePath();
    ctx.fillStyle = "#fff";
    ctx.fill();
  }
}