JavaScript/HTML画布：循环按钮行的鼠标检测

我正在构建一个简单的鼓机，它使用画布作为GUI。我用for循环绘制了一行按钮，单击时可以打开/关闭

当它工作时，我对我的

按钮切换检测功能感到有点尴尬。这是我能想到的唯一的解决办法来检查鼠标在哪个按钮上。我想知道是否有人能提出一个更好的方法

var buttonToggleDetection = function(posx, posy, x) {

    if (posx < canvas.width/2 && posy > x && posy < x*2) {

        if (posx > x*1 && posx < x*2) {
            if (pattern[0] === 0) {
                pattern[0] = 1;
            } else {
                pattern[0] = 0;
            }
        }
        else if (posx > x*2 && posx < x*3) {
            if (pattern[1] === 0) {
                pattern[1] = 1;
            } else {
                pattern[1] = 0;
            }
        }
        else if (posx > x*3 && posx < x*4) {
            if (pattern[2] === 0) {
                pattern[2] = 1;
            } else {
                pattern[2] = 0;
            }
        } 
        else if (posx > x*4 && posx < x*5) {
            if (pattern[3] === 0) {
                pattern[3] = 1;
            } else {
                pattern[3] = 0;
            }
        }
        else if (posx > x*5 && posx < x*6) {
            if (pattern[4] === 0) {
                pattern[4] = 1;
            } else {
                pattern[4] = 0;
            }
        }
        else if (posx > x*6 && posx < x*7) {
            if (pattern[5] === 0) {
                pattern[5] = 1;
            } else {
                pattern[5] = 0;
            }
        }
        else if (posx > x*7 && posx < x*8) {
            if (pattern[6] === 0) {
                pattern[6] = 1;
            } else {
                pattern[6] = 0;
            }
        }
        else if (posx > x*8 && posx < x*9) {
            if (pattern[7] === 0) {
                pattern[7] = 1;
            } else {
                pattern[7] = 0;
            }
        }
    }
    if (posx > canvas.width/2 && posy > x && posy < x*2) {

        if (posx > x*9 && posx < x*10) {
            if (pattern[8] === 0) {
                pattern[8] = 1;
            } else {
                pattern[8] = 0;
            }
        }
        else if (posx > x*10 && posx < x*11) {
            if (pattern[9] === 0) {
                pattern[9] = 1;
            } else {
                pattern[9] = 0;
            }
        } 
        else if (posx > x*11 && posx < x*12) {
            if (pattern[10] === 0) {
                pattern[10] = 1;
            } else {
                pattern[10] = 0;
            }
        }
        else if (posx > x*12 && posx < x*13) {
            if (pattern[11] === 0) {
                pattern[11] = 1;
            } else {
                pattern[11] = 0;
            }
        }
        else if (posx > x*13 && posx < x*14) {
            if (pattern[12] === 0) {
                pattern[12] = 1;
            } else {
                pattern[12] = 0;
            }
        }
        else if (posx > x*14 && posx < x*15) {
            if (pattern[13] === 0) {
                pattern[13] = 1;
            } else {
                pattern[13] = 0;
            }
        }
        else if (posx > x*15 && posx < x*16) {
            if (pattern[14] === 0) {
                pattern[14] = 1;
            } else {
                pattern[14] = 0;
            }
        }
        else if (posx > x*16 && posx < x*17) {
            if (pattern[15] === 0) {
                pattern[15] = 1;
            } else {
                pattern[15] = 0;
            }
        }
    }
    return;
}

var buttonoggledetection=函数（posx，posy，x）{
if（posxx&&posyx*1&&posxx*2&&posxx*3&&posxx*4&&posxx*5&&posxx*6&&posxx*7&&posxx*8&&posxcanvas.width/2&&posy>x&&posyx*9&&posxx*10&&posxx*11&&posxx*12&&posxx*13&&posxx*14&&posxx*15&&posxx*16&&posx
我建议使用svg而不是画布。SVG节点的内容与画布节点的内容非常相似，但每个形状都是由XML标记或动态创建的元素构建的，与document.body的内容非常相似。这给您带来了一些巨大的优势：

您可以将类应用于各个形状，并使用css应用
颜色/样式
您可以利用css的：悬停伪样式
将颜色应用于悬停的元素
最重要的是：您可以将事件绑定到每个形状
以下代码可在

以下是html：

<svg id="drumMachine"/>
<div id="debugText"/>



以下是构建PAD和绑定事件的javascript：

var svg = document.getElementById("drumMachine");
var activePad = null;
var debugText = document.getElementById("debugText");

for (var x = 0; x < 16; x++) {
    createNewPad(x);
}


function createNewPad(padNumber) {
    var r = document.createElementNS("http://www.w3.org/2000/svg", "rect")
    r.setAttribute("width", "40");
    r.setAttribute("height", "40");
    r.setAttribute("x", padNumber * 50);
    r.setAttribute("data-pad-number", x);
    r.onmouseenter = mouseOver;
    r.onmouseleave = mouseOut;
    svg.appendChild(r);
}

function mouseOver() {
    activePad = this;
    debugText.innerHTML = this.getAttribute("data-pad-number");
}

function mouseOut() {
    activePad = null;
    debugText.innerHTML = "";
}

var svg=document.getElementById（“drumMachine”）；
var-activePad=null；
var debugText=document.getElementById（“debugText”）；
对于（变量x=0；x<16；x++）{
createNewPad（x）；
}
函数createNewPad（padNumber）{
var r=document.createElements（“http://www.w3.org/2000/svg“，“rect”）
r、 setAttribute（“宽度”、“40”）；
r、 setAttribute（“高度”、“40”）；
r、 setAttribute（“x”，焊盘编号*50）；
r、 setAttribute（“数据焊盘编号”，x）；
r、 onMouseCenter=鼠标悬停；
r、 onmouseleave=鼠标出；
svg.appendChild（r）；
}
函数mouseOver（）{
activePad=这个；
debugText.innerHTML=this.getAttribute（“数据填充号”）；
}
函数mouseOut（）{
activePad=null；
debugText.innerHTML=“”；
}
您检查按钮边界的方式似乎很好……但通过在数组中定义按钮，然后在该数组中循环，可以稍微收紧循环

以下是在html画布中绘制和切换按钮的一种方法：




定义每个按钮的x、y、宽度、高度和按下状态

var buttons=[];
buttons.push({x:20,y:20,width:50,height:35,text:'One',isPressed:false});
buttons.push({x:80,y:20,width:50,height:35,text:'Two',isPressed:true});
buttons.push({x:140,y:20,width:50,height:35,text:'Three',isPressed:false});


测试鼠标是否位于任何按钮上：

for(var i=0;i<buttons.length;i++){
    var b=buttons[i];
    if(mx>b.x && mx<b.x+b.width && my>b.y && my<=b.y+b.height){
        b.isPressed=(!b.isPressed);
    }
}


点击按钮
这篇文章最好发布在@Scriptable:IMHO，这个问题对于Stackoverflow和codereview来说似乎都没问题。：-）我对canvas元素不是很熟悉，所以您也可以将事件绑定到canvas的子元素。如果是这种情况，您可以在for循环中执行此操作，在该循环中，您可以创建Padsher的小提琴，用于切换开/关状态：