动态移动弧（画布）

Question

在弧（Canvas html）上工作我已经使用 Canvas 创建了弧现在我想将弧从 0 移动到 100% 我已经创建了变量名称调用 linevalue=“0”如果我输入的线值为 40% 它有如果我将值输入为 20%，则要再次相应地移动，它必须下降。

我在 myCurve() 中添加了 linevalue。

但我仍然没有得到结果

谁能推荐我这个

var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');  
function myCurve(x,y,linevalue){  
 context.translate(x,y);
 context.beginPath();
 context.moveTo(0,0,linevalue);
 context.quadraticCurveTo(85,18,120,0);
 context.lineWidth = 2;
 context.strokeStyle = 'Orange';
 context.stroke();
 context.translate(-x,-y);
} 

这是我在小提琴中的全部代码

Fiddle Link

提前致谢 马哈迪文

Answer 1

看起来您的项目严重依赖于一些简单的三角函数。所以是时候复习一下你的三角函数了。

二次曲线的深度由它的control point决定。

以下是数学计算控制点的方法：

• 从二次曲线起点和终点之间的假想线开始（称为 lineSE）。

• 使用 Math.atan2 计算 lineSE 的角度。

• 使用线性插值计算 lineSE 的中点。

• 您的四曲线控制点位于中点与 lineSE 相切的直线上。切线角度为 lineSE 角度 + Math.PI/2。

• 控制点越接近 lineSE，二次曲线变得越浅。在 0% 时，曲线是平的——它变成了 lineSE。

• 您的设计决定了弧线的大小必须为 100%，但您的控制点将始终将弧线的大小设置为您确定的任何百分比。