Question

使用arc（Canvas html）我已经使用Canvas创建了弧我现在想要将弧移动到0 - 100％我创建了变量名称calllinevalue =＆＃34; 0＆＃34;如果我输入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

提前致谢 Mahadevan

Answer 1

看起来你的项目很大程度上依赖于一些简单的三角函数。所以现在是时候了解你的三角学。

二次曲线的深度由其control point确定。

以下是如何以数学方式计算控制点：

从二次曲线的起点和终点之间的虚线开始（称之为lineSE）。
使用Math.atan2计算lineSE的角度。
使用线性插值计算lineSE的中点。
您的四曲线控制点沿着与中点处的lineSE相切的直线。切线角度为lineSE角度+ Math.PI / 2.
控制点越接近lineSE，二次曲线变得越浅。在0％处，曲线是平坦的 - 它变为lineSE。
您的设计决定了电弧在100％时的大小，但您的控制点将始终以您确定的任何百分比设置弧的大小。

动态移动弧（画布）

1 个答案: