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

ここに1つの間違いがあります。これを変える：

var sliderSpeed = document.getElementById('sliderStatus')

に

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