Установите точку на случайном делении круга

У меня есть круг и случайная точка, которую я поставил на нем. Эта случайная точка в настоящее время действительно случайна, но я хочу, чтобы она находилась в центре разделения сетки на заднем плане.

Я сделал фрагмент с текущей случайной точкой:

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>

и я хочу, чтобы черный крест был в центре случайное деление сетки, как это (в любом делении, которое сталкивается с кругом):

Установите точку на случайном делении круга

javascript algorithm canvas 2d

16.12.2018 17:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

16.12.2018 18:27

Другие вопросы по теме

Почему вы не можете использовать хеш-таблицы / словари в алгоритме подсчетной сортировки?

Найдите расстояние между ближайшими элементами в O (n)

Алгоритм Штрассена-Винограда

Как написать функцию Судзика на java

Насчет определенности определения алгоритма?

Алгоритм A-star с вращением

Ошибка сегментации (дамп ядра) ошибка времени выполнения с программой MaxPairwiseProduct

Как я могу построить и распечатать в дереве категорий браузера?

Подсчитайте максимальные инверсии для k подмассивов

Какое соглашение является приемлемым для поведения отмены / повтора?

Установите точку на случайном делении круга

Ответы 1

Другие вопросы по теме

Похожие вопросы