javascript - 圆圈， Canvas 和数学，我的天哪

我试图用鼠标在画布上画一个圆，但是我的数学是错误的，我不知道该如何解决。我希望在单击并拖动以制作圆时，圆的顶部（或底部）和圆的侧面与光标的十字线对齐。

我有一个fiddle set up here。

问题数学看起来像这样：

    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给了我找出答案的线索。如果您想知道我的意思：http://jsfiddle.net/n17hqe14/6/

最佳答案

公式看起来正确，但有一个错字：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);