HTML5 Canvas Animation Slider

Question

Я относительно новичок в 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> 

Answer 1

Доля значение из метода обработчика слайдера и установить его непосредственно на 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 

Я бы рекомендовал:

• Использование идентификатор для слайдера, отдельный JS из DOM и вместо этого используйте addEventListener.
• Используя идентификатор, установите начальное значение на sliderSpeed. Таким образом, вам нужно только учитывать начальное значение ползунка на самом слайдере.

Answer 2

Вот одна ошибка. Изменить это:

var sliderSpeed = document.getElementById('sliderStatus') 

в

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