javascript - 如何创建始终打开到固定点的圆弧

Question

我正尝试在 Canvas 上创建一个带有弧形的向日葵效果，但我的几何技能生疏了。

首先，我在 Canvas 中间某处创建了一个原点，Origin (X1, Y1)然后我创建获取鼠标位置 Mp (Xm, Ym)

现在，如果我从 Origin 到 Mp 做一条假想线，那么 Mp 应该是用一个新的更小的圆弧平分圆弧的点在 Origin 方向上的原点，将定义具有静态半径(比如 20)的圆弧。 Origin、Mp 和较小的 Radius 这三个点应形成一条直线。

我希望它以静态半径(比如 20)切过圆弧的中心，而不管鼠标离 Origin 有多近。

所以，如果您想象一个时钟。如果手连接的中间部分是Origin。

• 如果鼠标在 3 点钟位置，弧形看起来像一个“)”
• 如果鼠标在 9 点钟位置，弧形看起来像一个“(”
• 如果鼠标位于 12 点钟位置，则圆弧看起来像一个“(”，如果它旋转了 90°
• 如果鼠标位于 6 点钟位置，如果旋转 270°，则圆弧看起来像“(”
• 等...

并且鼠标位于该弧的顶部。

对于我的问题，具体来说，与其说是如何获得点数、鼠标事件或其他任何问题，不如说是假设我有 {X1,Y1} 和 {Xm,Ym}，那么按照描述制作弧线所需的数学是什么以上？

或者对于 JS/jQuery 专家来说，arc() 参数？

编辑:一个非常糟糕的 photoshop 渲染

右下角添加了一个鼠标，一般显示绘制圆弧/曲线时鼠标指针的位置。

Answer 1

最简单的方法就是调整arc命令的起止 Angular 。

您可以绘制一系列弧线来形成您的花朵。

提示:如果您希望花瓣不那么圆而更弯曲，您可以使用 quadraticCurveTo 而不是圆弧来绘制花瓣的外侧。

祝你的项目好运!

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var cx=150;
var cy=150;
var radius=50;
var PI=Math.PI;
var startAngle=0-PI/8;
var sweepAngle=PI/4;
var nextTime=0;
var delay=250;

requestAnimationFrame(animate);

function draw(){

  ctx.clearRect(0,0,cw,ch);

  ctx.beginPath();
  ctx.arc(cx,cy,5,0,PI*2);
  ctx.closePath();
  ctx.fill();

  ctx.beginPath();
  ctx.arc(cx,cy,radius,startAngle,startAngle+sweepAngle);
  ctx.stroke();

}

function animate(time){
  requestAnimationFrame(animate);
  if(time>nextTime){
    draw();
    startAngle+=PI*2/30;
    nextTime+=delay;
  }
}

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

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

[根据更多信息添加]

是的，我想你已经明白了!

从鼠标位置 mcx,mcy 开始。

定义一个较小的圆心点与鼠标位置的夹 Angular radianAngle。

定义小中心点距离鼠标中心点 radius 的距离。

计算小圆的圆心:

var scx = mcx + radius*Math.cos(radianAngle);
var scy = mcy + radius*Math.sin(radianAngle);

定义小圆的半径smallRadius。

在较小的圆弧 sweepAngle 上定义您想要的总 sweepAngle。

定义小圆弧的起点和终点 Angular 。这实际上很容易，因为您希望小圆弧“指向”鼠标点。提示:小圆弧的中心必须始终位于 radianAngle 的中点。因此，startingAngle = ( radianAngle - sweepAngle/2。

所以最后你“指向”鼠标的小 Angular 变成了:

ctx.arc( scx,scy, smallRadius, startingAngle, startingAngle+sweepAngle );

干杯!