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

Question

我正在尝试在 Canvas 上用弧线创建向日葵效果，但我的几何技能还很生疏。

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

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

我希望它以静态半径(比如 20)穿过圆弧的中心，无论鼠标距离原点有多近。

所以，如果你想象一个时钟。如果双手连接的中间部分是原点。

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

鼠标位于该弧的顶部。

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

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

编辑:Photoshop 渲染效果非常差

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

Answer 1

最简单的方法是调整圆弧命令的起始和结束 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开始。

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

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

计算小圆的中心点:

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

定义小圆的半径smallRadius。

定义您想要的较小弧上的总扫描 Angular sweepAngle。

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

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

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

干杯!