Рисование и обнаружение холста

Question

Я пытаюсь сделать cricle на холсте. Проблема в том, что круг делится на 4 равные половины, каждый с разным цветом. Как я могу сделать эти 4 половинки в круге, каждый с другим цветом? я имею в виду, что я видел, что метод arc() только рисует только по кругу? Также я хочу обнаружить столкновение на этих четырех половинах. его легко обнаружить на одном цветовом круге, но я хочу определить, с какой стороны цвета 1-го круга объект (например, другой круг на холсте с одним цветом) столкнулся, например. столкнулись с зеленым, синим и т. д. Я не могу понять, как сделать 4 цветной круг? помогите пожалуйста:/

Answer 1

context.arc - это команда пути.

Путь команд начинается с context.beginPath и продолжается до следующей команды пути (следующая команда пути начинается со следующего context.beginPath).

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

Вам необходимо будет использовать 4 команды дуги, чтобы создать свой 4-цветный круг.

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
ctx.lineWidth=10; 
 
var cx=150; 
 
var cy=150; 
 
var radius=75; 
 
var PI2=Math.PI*2; 
 
var wedgeCount=4; 
 
var colors=['red','green','gold','blue']; 
 

 
for(var i=0;i<wedgeCount;i++){ 
 
    ctx.beginPath(); 
 
    ctx.arc(cx,cy,radius,PI2/wedgeCount*i,PI2/wedgeCount*(i+1)); 
 
    ctx.strokeStyle=colors[i]; 
 
    ctx.stroke(); 
 
} 
 

 
function randomColor(){ 
 
    return('#'+Math.floor(Math.random()*16777215).toString(16)); 
 
}

body{ background-color: ivory; } 
 
canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

тестирования Collision круги из дуг

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

identifying event on arc of circle

Это упростит вашу математику, если вы предполагаете, каждый из 1/4 окружности клин вместо дуги. Таким образом, вам не придется устранять случаи, когда центральные точки двух кругов настолько близки, что сами дуги больше не пересекаются.

Сначала определите, меньше ли расстояние между двумя кругами, чем сумма их радиусов. Если да, то это означает, что они, возможно, не обязательно пересекаются.

Затем соедините воображаемую линию между двумя центральными точками и определите углы линии. Углы скажут вам, какие клины пересекаются.