这将为您提供一个完美的四分之一圆,从 (5|100) 开始,到 (10|0) 结束。
if (x > 5) {
y = 100 * Math.sqrt( 1 - Math.pow(((x - 5) / 5), 2) );
}
http://fooplot.com/plot/2i8hy2twl4
说明(可选)
警告!可能包含数学!
让我们从一个更简单的情况开始,一个半径为 1 且中心为 (0|0) 的四分之一圆。我们知道x² + y² = r²
(勾股定理)。x 和 r 是已知的,所以我们可以这样计算 y:y = sqrt(r² - x²)
. 由于我们的半径始终为 1 且 1² 等于 1,我们可以将其分解为:
y = sqrt(1 - x²)
y 的值范围从 0 到 1。我们希望它的范围从 0 到 100。为此,我们只需将右侧乘以 100。
y = 100 * sqrt(1 - x²)
^^^^^^
要将整个事物 5 向右移动,我们需要从 x 中减去 5。
y = 100 * sqrt(1 - (x - 5)²)
^^^^^
另外,我们想将它向右拉伸,这样我们的四分之一圆的范围是从 x = 5 到 x = 10 而不是 x = 6,所以将 (x - 5) 除以 5。
y = 100 * sqrt(1 - ((x - 5) / 5)^2)
^^^^
现在要做的就是用 Math.sqrt 替换 sqrt 和 Math.pow 替换 ^2 以使其成为有效的 Javascript 代码。
y = 100 * Math.sqrt( 1 - Math.pow(((x - 5) / 5), 2) );