Question

我的目标是将滑块附加到此编解码器动画上，以便用户可以编辑动画的速度。

目前，我没有收到任何错误，但我没有从输入滑块传递给动画的值。

   this.speed     = dotSpeed;

我的目标是从滑块中获取值，创建一个变量并将其放入“function Circle”属性中。

var dotArray = [];

function threeDotSliderChangeSpeed (value) {
                    document.getElementById('threeDotSpeed').innerHTML = value;
                    dotSpeed = +value;   // + will convert the string to number
                for (var i = 0; i < dotArray.length; i++) {
                    dotArray[i].speed = Math.round(1 * dotSpeed);
                }
            }
            

	var canvas = document.getElementById( 'canvas2' ),
		c = canvas.getContext( '2d' ),
		i = 0,
		rowOne = [],
		rowTwo = [],
		rowThree = [],
		length = canvas.width * 0.4,
		origin = [ canvas.width / 2, canvas.height / 2 ],
		angle = 90,
        dotSpeed = 2,
		loop;

	function Circle( args ) {
		this.position  = [ 0, 0 ];
		this.angle     = 30;
		this.speed     = dotSpeed;
		this.offset    = 1;
		this.length    = 100;
		this.size      = 5;
		this.color     = '#fff';
		this.direction = 'grow';

		if ( 'undefined' !== typeof args.position )
			this.position = args.position;
		if ( 'undefined' !== typeof args.angle )
			this.angle = args.angle;
		if ( 'undefined' !== typeof args.speed )
			this.speed = args.speed;
		if ( 'undefined' !== typeof args.length )
			this.length = args.length;
		if ( 'undefined' !== typeof args.size )
			this.size = args.size;
		if ( 'undefined' !== typeof args.color )
			this.color = args.color;
		if ( 'undefined' !== typeof args.offset ) {
			this.offset = args.offset;
			this.length = canvas.width * this.offset * 0.03
		}
	}

	Circle.prototype.render = function() {
		this.move();
		this.draw();
	}

	Circle.prototype.draw = function() {
		c.fillStyle = this.color;
		c.beginPath();
		c.arc( this.position[0], this.position[1], ( this.size / 2 ), 0, Math.PI * 2, true );
		c.closePath();
		c.fill();
	}

	Circle.prototype.move = function() {
		this.angle = ( this.angle < 360 ) ? this.angle + this.speed : 0;

		if ( 'grow' == this.direction ) {
			this.length++;
			this.direction = ( 150 >= this.length ) ? 'grow' : 'shrink';
		} else {
			this.length--;
			this.direction = ( 50 <= this.length ) ? 'shrink' : 'grow';
		}

		this.position[0] = this.length * Math.sin( this.angle * ( Math.PI / 180 ) );
		this.position[1] = this.length * Math.cos( this.angle * ( Math.PI / 180 ) );

		this.position[0] = this.position[0] + origin[0];
		this.position[1] = this.position[1] + origin[1];
	}

	for ( i = 1; i < 10; i++ ) {
		var offset = 1;
		rowOne.push( new Circle( {
			angle: 0,
			offset: i
		} ) );
		rowTwo.push( new Circle( {
			angle: 120,
			offset: i
		} ) );
		rowThree.push( new Circle( {
			angle: 240,
			offset: i
		} ) );
	}

	function render() {
		c.fillStyle = 'rgba( 0, 0, 0, 0.025 )';
		c.fillRect( 0, 0, canvas.width, canvas.height );
		for ( i = 0; i < 9; i++ ) {
			rowOne[i].render();
			rowTwo[i].render();
			rowThree[i].render();
		}
	}

	(function animate() {
		render();
		loop = setTimeout( animate, 40 );
	})();

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CodePen - 3 dotted-line canvas animation.</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="jquery-2.1.0.min.js"></script>
  </head>

  <body>
     <canvas id="canvas2" width="400" height="400"></canvas>
     <p id="attribute">Speed </p>
     <span id="threeDotSpeed" class="sliderSpan">5</span>
     <input type="range" min="0" max="10" value="5" step="1" onchange="threeDotSliderChangeSpeed(3)"/>
     <br /> <br />
     <script src="js/index.js"></script>
  </body>
</html>

以下是我使用相同方法的另一个视频。

https://www.youtube.com/watch?v=vjZ6CfQ2WrY&feature=youtu.be

Answer 1

要从滑块获取值，您需要从元素中获取值在变更事件上使用document.getElementById('rg').value

JS：

var dotArray = [];

function threeDotSliderChangeSpeed () {
    var value = document.getElementById('rg').value;
    alert(value);
    document.getElementById('threeDotSpeed').innerHTML = value;
    dotSpeed = +value;   // + will convert the string to number
    for (var i = 0; i < dotArray.length; i++) {
        dotArray[i].speed = Math.round(1 * dotSpeed);
    }
}


var canvas = document.getElementById( 'canvas2' ),
    c = canvas.getContext( '2d' ),
    i = 0,
    rowOne = [],
    rowTwo = [],
    rowThree = [],
    length = canvas.width * 0.4,
    origin = [ canvas.width / 2, canvas.height / 2 ],
    angle = 90,
    dotSpeed = 2,
    loop;

function Circle( args ) {
    this.position  = [ 0, 0 ];
    this.angle     = 30;
    this.speed     = dotSpeed;
    this.offset    = 1;
    this.length    = 100;
    this.size      = 5;
    this.color     = '#fff';
    this.direction = 'grow';

    if ( 'undefined' !== typeof args.position )
        this.position = args.position;
    if ( 'undefined' !== typeof args.angle )
        this.angle = args.angle;
    if ( 'undefined' !== typeof args.speed )
        this.speed = args.speed;
    if ( 'undefined' !== typeof args.length )
        this.length = args.length;
    if ( 'undefined' !== typeof args.size )
        this.size = args.size;
    if ( 'undefined' !== typeof args.color )
        this.color = args.color;
    if ( 'undefined' !== typeof args.offset ) {
        this.offset = args.offset;
        this.length = canvas.width * this.offset * 0.03
    }
}

Circle.prototype.render = function() {
    this.move();
    this.draw();
}

Circle.prototype.draw = function() {
    c.fillStyle = this.color;
    c.beginPath();
    c.arc( this.position[0], this.position[1], ( this.size / 2 ), 0, Math.PI * 2, true );
    c.closePath();
    c.fill();
}

Circle.prototype.move = function() {
    this.angle = ( this.angle < 360 ) ? this.angle + this.speed : 0;

    if ( 'grow' == this.direction ) {
        this.length++;
        this.direction = ( 150 >= this.length ) ? 'grow' : 'shrink';
    } else {
        this.length--;
        this.direction = ( 50 <= this.length ) ? 'shrink' : 'grow';
    }

    this.position[0] = this.length * Math.sin( this.angle * ( Math.PI / 180 ) );
    this.position[1] = this.length * Math.cos( this.angle * ( Math.PI / 180 ) );

    this.position[0] = this.position[0] + origin[0];
    this.position[1] = this.position[1] + origin[1];
}

for ( i = 1; i < 10; i++ ) {
    var offset = 1;
    rowOne.push( new Circle( {
        angle: 0,
        offset: i
    } ) );
    rowTwo.push( new Circle( {
        angle: 120,
        offset: i
    } ) );
    rowThree.push( new Circle( {
        angle: 240,
        offset: i
    } ) );
}

function render() {
    c.fillStyle = 'rgba( 0, 0, 0, 0.025 )';
    c.fillRect( 0, 0, canvas.width, canvas.height );
    for ( i = 0; i < 9; i++ ) {
        rowOne[i].render();
        rowTwo[i].render();
        rowThree[i].render();
    }
}

(function animate() {
    render();
    loop = setTimeout( animate, 40 );
})();

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CodePen - 3 dotted-line canvas animation.</title>
        <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="jquery-2.1.0.min.js"></script>
    </head>

    <body>
        <canvas id="canvas2" width="400" height="400"></canvas>
        <p id="attribute">Speed </p>
        <span id="threeDotSpeed" class="sliderSpan">5</span>
        <input type="range" min="0" max="10" value="5" step="1" id="rg" onchange="threeDotSliderChangeSpeed(3)"/>
        <br />
        <br />
        <script src="js/index.js"></script>
    </body>
</html>

我能够获得警报滑块值你可以在codepin中看到输出 http://codepen.io/anon/pen/aOOjXE

如何将范围/输入滑块附加到画布动画上？

1 个答案: