0

我对 Javascript 比较陌生，所以希望这对 JS 大师来说是一个简单的解决方法。

我正在尝试创建一个动画 html5 画布，其中简单的白色形状在页面上浮动。我的目标是创建滑块来控制漂浮在页面上的白色形状的大小、形状、速度等。

我已经创建了动画和滑块，但是对于如何将滑块中的值获取到动画中并更新画布以在用户更改滑块时应用这个新值有点卡住了。

首先，我尝试将滑块的值更新为速度值。

function sliderChange (value) {
    document.getElementById('sliderStatus').innerHTML = value;
}

var canvas = null;
var context = null;
var bufferCanvas = null;
var bufferCanvasCtx = null;
var flakeArray = [];
var flakeTimer = null;
var maxFlakes = 100;
var sliderSpeed = document.getElementById('sliderStatus')

function Flake() {
    this.x = Math.round(Math.random() * context.canvas.width);
    this.y = -10;
    this.drift = Math.random();
    this.speed = Math.round(Math.random() * sliderSpeed) + 5;
    this.width = (Math.random() * 3) + 2;
    this.height = (Math.random() * 3) + 100;
}

HTML正文代码：

<input type="range" min="0" max="100" value="50" step="2" onchange="sliderChange(this.value)"/>
<br /> <br />
Slider Value = <span id="sliderStatus">50</span>
4

2 回答 2

0

共享滑块处理程序方法的值并将其直接设置在您的滑块速度上：

function sliderChange (value) {
    document.getElementById('sliderStatus').innerHTML = value;
    sliderSpeed = +value;   // + will convert the string to number
}

...
var sliderSpeed = 50;       // same initial value as slider

我会推荐：

  • addEventListener为滑块使用ID，将 JS 与 DOM 分开并使用
  • 使用 ID，将初始值设置为sliderSpeed。这样你只需要关心滑块本身的滑块初始值。
于 2015-03-30T00:25:26.180 回答
0

这是一个错误。改变这个：

var sliderSpeed = document.getElementById('sliderStatus')

至

var sliderSpeed = document.getElementById('sliderStatus').innerHTML;
于 2015-03-29T23:04:52.137 回答