Javascript 圆圈、画布和数学，噢，天哪

我试图用鼠标在画布上画一个圆，但我的数学错了，我想不出怎么解决它。我希望在单击并拖动以创建圆时，圆的顶部（或底部）和侧面与光标的十字光标对齐

我有一本书

所讨论的数学问题如下所示：

    var centerx = self.startDragPos.x + (mouse.x-self.startDragPos.x)/2;
    var centery = self.startDragPos.y + (mouse.y-self.startDragPos.y)/2;
    var radius = Math.sqrt(Math.pow(self.startDragPos.x - mouse.x, 2) + Math.pow(self.startDragPos.y - mouse.x, 2))/2;

    ctx.arc(centerx, centery, radius, 0, 2 * Math.PI);

公式看起来是对的，我哪里出错了

更新

---

谢谢你的建议。我问的问题不是很清楚，但Av Avt给了我解决问题的线索。如果您想知道我的意思：

@emeraldwealth为您提供了一种将圆线与十字准线对齐的迂回方式。一个更简单的修改是更正

radius

变量中的输入错误

var radius = Math.sqrt(Math.pow(self.startDragPos.x - mouse.x, 2) + Math.pow(self.startDragPos.y - mouse.x, 2))/2;

应该是

var radius = Math.sqrt(Math.pow(self.startDragPos.x - mouse.x, 2) + Math.pow(self.startDragPos.y - mouse.y, 2))/2;

然而，@emeraldwearm的解决方案比简单地纠正打字错误更有效

这是一个棘手的部分，它不会将圆的顶部/底部和左/右与十字准线对齐，它会使十字准线标记圆线的准确位置

---

要使顶部/底部和左/右对齐更为棘手，目前我还没有意识到这一点。至少，这将使圆的绘制更加可预测。

@emeraldwealth为您提供了一种将圆线与十字准线对齐的迂回方式。一个更简单的修改是更正

radius

变量中的输入错误

var radius = Math.sqrt(Math.pow(self.startDragPos.x - mouse.x, 2) + Math.pow(self.startDragPos.y - mouse.x, 2))/2;

应该是

var radius = Math.sqrt(Math.pow(self.startDragPos.x - mouse.x, 2) + Math.pow(self.startDragPos.y - mouse.y, 2))/2;

然而，@emeraldwearm的解决方案比简单地纠正打字错误更有效

这是一个棘手的部分，它不会将圆的顶部/底部和左/右与十字准线对齐，它会使十字准线标记圆线的准确位置

---

要使顶部/底部和左/右对齐更为棘手，目前我还没有意识到这一点。至少，这会使绘制圆更容易预测。

我觉得公式看起来很正确，但有一个打字错误：

Math.pow（self.startDragPos.y-mouse.x，2）

应该是

Math.pow（self.startDragPos.y-mouse.y，2）

不是吗

var centerx = self.startDragPos.x + (mouse.x-self.startDragPos.x)/2;
var centery = self.startDragPos.y + (mouse.y-self.startDragPos.y)/2;
var radius = Math.min(Math.abs(self.startDragPos.x - mouse.x), Math.abs(self.startDragPos.y - mouse.y))/2;

ctx.arc(centerx, centery, radius, 0, 2 * Math.PI);

---

公式在我看来是正确的，但有一个输入错误：

Math.pow（self.startDragPos.y-mouse.x，2）

应该是

Math.pow（self.startDragPos.y-mouse.y，2）

不是吗

var centerx = self.startDragPos.x + (mouse.x-self.startDragPos.x)/2;
var centery = self.startDragPos.y + (mouse.y-self.startDragPos.y)/2;
var radius = Math.min(Math.abs(self.startDragPos.x - mouse.x), Math.abs(self.startDragPos.y - mouse.y))/2;

ctx.arc(centerx, centery, radius, 0, 2 * Math.PI);

---

作为另一种尝试，你可以尝试以下几点：

var centerx = (mouse.x+startDragPos.x)/2;
var centery = (mouse.y+startDragPos.y)/2;
var radius = Math.min(Math.abs(startDragPos.x - mouse.x), Math.abs(startDragPos.y - mouse.y))/2;

---

它采用由相反顶点定义的矩形

startDragpos.（x，y）

和

鼠标（x，y）

，并在矩形内绘制最大的中心圆。

作为连续逼近模糊目标的另一种方法，尝试以下方法：

var centerx = (mouse.x+startDragPos.x)/2;
var centery = (mouse.y+startDragPos.y)/2;
var radius = Math.min(Math.abs(startDragPos.x - mouse.x), Math.abs(startDragPos.y - mouse.y))/2;

---

---

它采用由相对顶点定义的矩形

startDragpos.（x，y）

和

鼠标（x，y）

，并在矩形内绘制最大的中心圆。

这很酷，它将十字光标保持在圆周上。不完全是我想要的，但是+1.Eh，你能用你想要的图片更新一下吗？因为不管我怎么看，你的描述都是在谈论这个结果…换句话说。。如果我们画的是正方形而不是圆形，那么整个圆形都应该放在苏亚尔内部。现在我看到了这一点，我意识到我必须找到一种方法使圆形变成长方形。但是你给了我我想要的，谢谢你！长方形圆称为椭圆。有用于该形状的命令<代码>无效ctx.椭圆（x，y，半径x，半径y，旋转，星形缠绕，端角，逆时针）。这很酷，可以让十字准线保持在圆周上。不完全是我想要的，但是+1.Eh，你能用你想要的图片更新一下吗？因为不管我怎么看，你的描述都是在谈论这个结果…换句话说。。如果我们画的是正方形而不是圆形，那么整个圆形都应该放在苏亚尔内部。现在我看到了这一点，我意识到我必须找到一种方法使圆形变成长方形。但是你给了我我想要的，谢谢你！长方形圆称为椭圆。有用于该形状的命令<代码>无效ctx.椭圆（x，y，半径x，半径y，旋转，星形缠绕，端角，逆时针）。这将使十字准线保持在圆周上。我希望十字准线与圆圈的顶部和侧面对齐十字准线不能与“顶部和侧面”同时对齐，除非它与中心成45度角。这将使十字准线保持在圆周上。我希望十字准线与圆圈的顶部和侧面对齐十字准线不能与“顶部和侧面”同时对齐，除非它与中心成45度角。从他在我的回答中的评论来看，这似乎是他真正想要的：）@AvAvt我真正想要的是你的答案和这个：你只需要把rx和ry除以2就可以得到想要的效果。从他在我的答案中的评论来看，这似乎是他真正想要的：）@AvAvt我实际上想要的是你的答案和这个的组合：你只需要把rx和ry除以2就可以得到想要的效果。