javascript - 圆圈、 Canvas 和数学，天哪

Question

我试图用鼠标在 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/

Answer 1

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