画布绘图和检测

Question

我正试图在画布上制作一个cricle。问题在于圆被分成4个相等的半部，每个部分具有不同的颜色。我如何在圆圈中制作每个有不同颜色的那半个？我的意思是我看到arc（）方法只绘制圆圈​​？ 此外，我想要检测这四个半部分的碰撞。它很容易在单个彩色圆圈上进行检测但是我想要检测第一个圆圈的哪个颜色面（例如，只有一种颜色的画布上的另一个圆圈）与例如与绿色，蓝色等相撞 我无法弄清楚如何制作4色圆圈？请帮助：/

Answer 1

context.arc是路径命令。

路径命令以context.beginPath开头并一直持续到下一个路径命令（下一个路径命令以下一个context.beginPath开头）。

每个路径命令只允许1个样式。这意味着您只需使用1个路径命令就无法创建多色圆圈。

您必须使用4个圆弧路径命令来创建4色圆圈。

＆＃13;

＆＃13;

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));
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

由弧线构成的碰撞测试圈

这是以前的Stackoverflow答案，可帮助您入门。它描述了如何使用角度和角度。用于计算鼠标是否在弧上的距离。您可以对其进行修改以测试2个圆的碰撞。

identifying event on arc of circle

如果假设每1/4圈是楔形而不是弧形，它将简化数学运算。这样你就不必消除2个圆的中心点非常接近以至于弧本身不再相交的情况。

首先确定两个圆之间的距离是否小于它们的半径之和。如果是，则表示它们可能但不一定相交<​​/ em>。

然后连接2个中心点之间的假想线并确定线的角度。角度将告诉您哪些楔形相交。