javascript - 使用 slider 调整三个变量 HTML5 CANVAS JS

Question

我有一个 slider 需要调整 3 个变量。 slider 最小值为 0，最大值为 100。

随着 slider 移动相应地调整变量背后的数学原理是什么？

查看图片...

感谢任何帮助!!

Answer 1

我不了解 Canvas ，但如果您只询问简单的数学:

如果 slider 值为 X:

A = 25 + 最大值(50 - X, 0)/2

B = 50 - 绝对值(50 - X)/2

C = 25 + 最大值(X - 50, 0)/2

在javascript中，有Math.max()和Math.abs()，所以计算它的方法是:

function calculate(slidervalue) {
    var res = [];
    res['a'] = 25 + Math.max(50 - slidervalue, 0) / 2;
    res['b'] = 50 - Math.abs(50 - slidervalue) / 2;
    res['c'] = 25 + Math.max(slidervalue - 50, 0) /2;
    return res;
}

当然，您可以为结果创建一个对象，或者用它做任何您想做的事情，这只是示例代码。