Question

我正在尝试在画布中添加一个滑动条（如此http://demos.jquerymobile.com/1.3.0/docs/widgets/sliders/），以使用SoundJS控制声音的音量。

我尝试在google上搜索有关画布中滑块的一些信息，但没有任何内容

在这里，我只需要一些信息和控制游戏声音的方法，而不仅仅是静音或取消静音。

Answer 1

你能使用输入范围吗？

<input style="float: left; padding: 3px; margin-right: 3px;" id="fontSlider" type="range" name="points" value="15" min="1" max="100" step="1"/>
<input type="text" value="" id="value"/>

然后从文本框中获取值或仅从范围中获取值...

  $(document).ready(function () {
  var Values = $( "#fontSlider" ).val();
  $("#value").val(Values);   
        $("#fontSlider").change(        
            function () {
            var Values = $( "#fontSlider" ).val();
                $("#value").val(Values);
            }            
        );
    });

样本

http://jsfiddle.net/bowenac/zMn5N/1/

Answer 2

你可以使用KineticJS。 http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-shapes-horizontally-or-vertically-tutorial/

但是，有没有理由不能像<input type="range" name="Volume" min="1" max="11">那样使用滑动条来执行此操作？

Answer 3

您不能在画布中放置任何DOM元素。 Canvas只是一个位图，支持canvas的浏览器会忽略canvas标签内的任何标签。

然而，您可以将画布和输入控件包装在内部，例如div元素：

<div class="wrapper">
    <canvas width=800 height=600 id="myCanvas" ></canvas>
    <input id="volume" type=range min=0 max=100 value=50 >
</div>

然后使用CSS将滑块放在画布顶部。

.wrapper {
    position:relative;
    }
.wrapper > canvas,
.wrapper > input {
    position:absolute;
    left:0;
    top:0;
    }
.wrapper > input {
    right:10px;    /* places the slider */
    top:10px;
    }

然后设置音频元素的音量：

audio.volume = volume.value * 0.01;

另一种方法是为滑块实现所有逻辑，如果你需要它作为画布本身的一部分用于样式或其他原因。画布顶部的DOM元素会降低画布的性能，因此在某些性能至关重要的情况下，这可能是一个重要因素。

为此，您需要为画布上的滑块声明一个虚拟区域，并向上，向下注册鼠标事件并在canvas元素上移动。

通过将旋钮的当前值转换为其区域内的位置来绘制旋钮，在该区域中单击鼠标时，可以在该区域内移动旋钮并将其位置转换为标准化值，然后将其用于体积。 / p>

这是一个完整的小项目，但最简单的方法是在画布上放置一个输入元素。

Answer 4

我们在SoundJS Test Suite demo中使用jquery滑块，您可以在github repo中查看。希望有所帮助。

在画布中放置一个滑块以控制音量

4 个答案: