Audio 画布-可点击、可触摸的矩形，用于制作动画和播放声音

我真的很难弄明白如何用画布制作这样的东西。我希望能够有触摸事件，并最终发挥声音

我在看phaser.js，它看起来很有希望，但在形状上创建事件处理程序并不是内置的

这个想法似乎是要画一组矩形，在整个画布上听触摸和点击事件，然后找出相应的矩形来制作动画。。。但我一想到它就迷路了

---

DOM如此简单，画布如此困难？非常感谢大家的帮助

当您知道画布是一个包含多个图形的单个元素时，就不那么困难了。只有canvas元素本身触发事件。画布上的多个图形中的每一个都不会触发单个事件

因此，要在画布上实现效果，必须手动处理以下任务：

• 保存每个声音条的定义：其x、y位置及其宽度和高度

• 侦听鼠标事件

• 手动测试鼠标事件是否发生在某个声音条内，方法是针对每个保存的声音条点击测试鼠标

• 如果鼠标位于特定的声音条内，则播放该条的声音并用颜色突出显示该条

下面是示例注释代码和演示：

//画布相关变量
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var$canvas=$（“#canvas”）；
var canvasOffset=$canvas.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
//创建一个表示要播放的每个声音的对象数组
var声音=[]；
对于（var i=0；我表示感谢，这是非常彻底的！我确实在这期间创建了一个画布版本，但看到这种方法非常好。