在一个圆的随机分区上设置一个点

Question

我有一个圆圈和一个我在上面设置的随机点。这个随机点目前确实是随机的，但我希望它位于背景网格上一个分区的中心。

我用当前的随机点做了一个片段：

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

const size = 512
canvas.width = size
canvas.height = size

// Draw grid
ctx.beginPath()
ctx.strokeStyle = '#000'
const gridDivisions = 10
const gridSize = size / gridDivisions
for (let i = 0; i <= gridDivisions; i++) {
 ctx.moveTo(0, i * gridSize)
  ctx.lineTo(size, i * gridSize)
  ctx.moveTo(i * gridSize, 0)
  ctx.lineTo(i * gridSize, size)
}
ctx.stroke()
ctx.closePath()

// Draw circle
const radius = 180
ctx.beginPath()
ctx.strokeStyle = '#F00'
ctx.arc(size / 2, size / 2, radius, 0, Math.PI * 2)
ctx.stroke()
ctx.closePath()

// Draw random point
const angle = Math.random() * Math.PI * 2
ctx.save()
ctx.beginPath()
ctx.strokeStyle = '#000'
ctx.translate(Math.cos(angle) * radius + size / 2, Math.sin(angle) * radius + size / 2)
ctx.moveTo(-5, 5)
ctx.lineTo(5, -5)
ctx.moveTo(5, 5)
ctx.lineTo(-5, -5)
ctx.stroke()
ctx.closePath()
ctx.restore()


// Draw center
ctx.save()
ctx.beginPath()
ctx.strokeStyle = '#00F'
ctx.translate(size / 2, size / 2)
ctx.moveTo(-5, 5)
ctx.lineTo(5, -5)
ctx.moveTo(5, 5)
ctx.lineTo(-5, -5)
ctx.stroke()
ctx.closePath()
ctx.restore()

<canvas id="canvas"></canvas>

我希望黑色十字位于 随机网格划分 的中心，像这样（在与圆碰撞的任何划分中）：

Answer 1

您只需要将点的坐标缩小到像元大小，然后取它们的整数值，将它们缩小并增加像元大小的一半。

更容易展示，请看下面的代码片段：

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

const size = 512
canvas.width = size
canvas.height = size

// Draw grid
ctx.beginPath()
ctx.strokeStyle = '#000'
const gridDivisions = 10
const gridSize = size / gridDivisions
for (let i = 0; i <= gridDivisions; i++) {
 ctx.moveTo(0, i * gridSize)
  ctx.lineTo(size, i * gridSize)
  ctx.moveTo(i * gridSize, 0)
  ctx.lineTo(i * gridSize, size)
}
ctx.stroke()
ctx.closePath()

// Draw circle
const radius = 180
ctx.beginPath()
ctx.strokeStyle = '#F00'
ctx.arc(size / 2, size / 2, radius, 0, Math.PI * 2)
ctx.stroke()
ctx.closePath()

// Draw random point
const angle = Math.random() * Math.PI * 2
let tx = Math.cos(angle) * radius + size / 2;
let ty = Math.sin(angle) * radius + size / 2;
[tx, ty] = [tx, ty].map(c => (c / gridSize | 0) * gridSize + gridSize / 2);
ctx.save()
ctx.beginPath()
ctx.strokeStyle = '#000'
ctx.translate(tx, ty)
ctx.moveTo(-5, 5)
ctx.lineTo(5, -5)
ctx.moveTo(5, 5)
ctx.lineTo(-5, -5)
ctx.stroke()
ctx.closePath()
ctx.restore()


// Draw center
ctx.save()
ctx.beginPath()
ctx.strokeStyle = '#00F'
ctx.translate(size / 2, size / 2)
ctx.moveTo(-5, 5)
ctx.lineTo(5, -5)
ctx.moveTo(5, 5)
ctx.lineTo(-5, -5)
ctx.stroke()
ctx.closePath()
ctx.restore()

<canvas id="canvas"></canvas>

在一个圆的随机分区上设置一个点

Set a point on a random division around a circle

javascript

algorithm

2d

canvas