Javascript 在画布中放置一个滑动条以控制音量

我试图在画布中添加一个滑动条（像这样），以使用SoundJS控制声音的音量

我试着在谷歌上搜索一些关于画布上的幻灯片的信息，但什么都没有

---

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

你可以使用KineticJS

---

但是，有什么原因不能像在

中那样使用滑动条来执行此操作吗？

可以使用输入范围吗

<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"/>

演示

---

不能在画布中放置任何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>

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

audio.volume = volume.value * 0.01;

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

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

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

---

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

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

我想我不能在画布上输入信息不？你提到的是游戏，是移动应用程序吗？我想如果你真的想在画布上使用它，你可以添加一个onClick属性，然后使用

getMousepos（）

来确定用户在滑块上单击的位置，如果你想使用滑块，可以使用

requestAnimFrame

来移动它。这是一个游戏！要画这个滑块，你有什么想法吗？看，如果你愿意，我会尝试制作一些示例代码。我想补充一点，根据游戏的不同，KineticJS可能会更有用。我想我不能在画布上输入内容。不，我相信你可以。试试看，让我知道哈哈。

.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;