时间戳

首页 > 解决方案 > 创建等轴测网格

javascript - 创建等轴测网格

问题描述

我正在尝试创建一个等距网格，但我对数学不是很好，我试图以奇数为条件，但它并没有给我预期的结果

这是我想要得到的一个例子

图像

const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
const cols = 8
const rows = 8

const PI = Math.PI
const TAU = PI * 2

const particles = []
const width = window.innerWidth
const height = window.innerHeight
const radius = 5
const offset =  width / cols

canvas.width = width
canvas.height = height

const init = () => {
  for (i = 0; i < rows; i++) {
    for (j = 0; j < cols; j++) {

      const x = j * offset
      const y = i * offset
      
      particles.push({
        x,
        y
      })
    }
  }
}

const update = () => {
  particles.forEach(particle => {
    ctx.beginPath()
    ctx.arc(particle.x, particle.y, radius, 0, TAU)
    ctx.fill()
    ctx.closePath()
  })

  window.requestAnimationFrame(update)
}

init()
window.requestAnimationFrame(update)```

标签： javascriptmathcanvas

解决方案

让我们定义点之间的距离D（也许是你的offset）

您可以使所有行的 y 间距相等，它是D/2

X-spacing 是D*sqrt(3)，并且 x-shift 取决于行，对于偶数是D*sqrt(3)/2，对于奇数是 0。

代码可能是这样的：（我对 JS 不是很熟悉）

const SQ3 = Math.Sqrt(3)
const SQ32 = Math.Sqrt(3) / 2
...
const D = offset   

for (i = 0; i < rows; i++) {
   for (j = 0; j < cols; j++) {

     const y = i * D / 2
     const x = j * D * SQ3 + (1 - i % 2) * D * SQ32
  
  particles.push({
    x,
    y
  })
}

推荐阅读