HTML5 Canvas 动画滑块

Question

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

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

我已经创建了动画和滑块，但我对如何将值从滑块获取到动画以及更新 canvas 以在用户更改时应用此新值有点困惑滑块。

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

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>

Answer 1

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

var sliderSpeed = document.getElementById('sliderStatus')

至

var sliderSpeed = document.getElementById('sliderStatus').innerHTML;

Answer 2

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

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

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

我会推荐：

为滑块使用 ID，将 JS 与 DOM 分开并使用 addEventListener 代替
使用ID，将初始值设置为sliderSpeed。这样你只需要关心滑块本身的滑块初始值。

HTML5 Canvas 动画滑块

HTML5 Canvas Animation Slider

javascript

slider

live-update

html5-canvas