圆圈和 canvas 以及数学，我的天

Question

我想用我的鼠标在 canvas 上画一个圆圈，但我的数学有误，我不知道如何解决它。我希望圆的顶部（或底部）和圆的侧面在您单击并拖动以制作圆时与光标的十字准线对齐。

有问题的数学看起来像这样：

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

Answer 2

@EmeraldWeapon 为您提供了一种将圆线与十字准线对齐的迂回方式。一个更简单的修改是更正 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;

但是，@EmeraldWeapon 的解决方案比简单地更正拼写错误更有效。

这是棘手的部分，这不会使圆圈的 top/bottom 和 left/right 与十字准线对齐，它会使十字准线准确标记线的位置圆圈。

要获得 top/bottom 和 left/right 对齐是比较棘手的，而我现在对此一无所知。至少，这将使圆的绘制更加可预测。

Answer 3

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

Answer 4

作为不断逼近您模糊陈述的目标的另一种变体，试试这个：

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) 和 mouse.(x,y) 定义的矩形，并绘制仍在矩形内的最大圆心圆。

圆圈和 canvas 以及数学，我的天

Circles and canvas and math, oh my

html

javascript

math

jquery

html5-canvas