HTML画布&；Javascript-悬停并单击事件

下面是一个脚本，它定义了两个函数，分别绘制4个矩形按钮和1个圆形按钮。我正在尝试在按钮中实现特定的悬停和单击功能（如脚本警报中所述），但对于如何实现这一点，我有点不知所措。我尝试在每次单击时调用makeInteractiveButton（）函数，但这会导致很多奇怪的重叠和延迟。我希望脚本执行以下操作：

如果圆形按钮悬停，我希望它的FillColor更改，如果单击，我希望它再次更改为代码中描述的颜色（#FFC77E表示悬停，#FFDDB0表示单击）。这只应在悬停或单击期间发生

HTML:

JavaScript:

var c=document.getElementById('game'),
    canvasX=c.offsetLeft,
    canvasY=c.offsetTop,
    ctx=c.getContext('2d')
    elements = [];

c.style.background = 'grey';

function makeInteractiveButton(x, strokeColor, fillColor) {
    ctx.strokeStyle=strokeColor;
    ctx.fillStyle=fillColor;
    ctx.beginPath();
    ctx.lineWidth=6;
    ctx.arc(x, 475, 20, 0, 2*Math.PI);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    elements.push({
        arcX: x,
        arcY: 475,
        arcRadius: 20
    });
}

b1 = makeInteractiveButton(235, '#FFFCF8', '#FFB85D');

c.addEventListener('mousemove', function(event) {
    x=event.pageX-canvasX; // cursor location
    y=event.pageY-canvasY;

    elements.forEach(function(element) {
        if (x > element.left && x < element.left + element.width && 
            y > element.top && y < element.top + element.height) { // if cursor in rect
          alert('Rectangle should undergo 5 degree rotation and 105% scale');
        }
        else if (Math.pow(x-element.arcX, 2) + Math.pow(y-element.arcY, 2) < 
                 Math.pow(element.arcRadius, 2)) { // if cursor in circle
            alert('Set b1 fillColour to #FFC77E.');
        }
    });
}, false);

c.addEventListener('click', function(event) {
    x=event.pageX-canvasX; // cursor location
    y=event.pageY-canvasY;

    elements.forEach(function(element) {
        if (x > element.left && x < element.left + element.width && 
            y > element.top && y < element.top + element.height) { // if rect clicked
            alert('Move all cards to centre simultaneously.');
        }
        else if (Math.pow(x-element.arcX, 2) + Math.pow(y-element.arcY, 2) < 
                 Math.pow(element.arcRadius, 2)) { // if circle clicked
            alert('Set b1 fillColour to #FFDDB0.');
        }
    });
}, false);

var c=document.getElementById（'game'），
canvasX=c.offsetLeft，
拉票，
ctx=c.getContext（'2d'）
元素=[]；
c、 style.background='灰色'；
函数makeInteractiveButton（x、strokeColor、fillColor）{
ctx.strokeStyle=strokeColor；
ctx.fillStyle=fillColor；
ctx.beginPath（）；
ctx.线宽=6；
弧（x，475，20，0，2*Math.PI）；
ctx.closePath（）；
ctx.stroke（）；
ctx.fill（）；
元素。推({
arcX:x，
arcY:475，
弧半径：20
});
}
b1=生成交互按钮（235'#FFFCF8'，'#FFB85D'）；
c、 addEventListener（'mousemove'，函数（事件）{
x=event.pageX-canvasX；//光标位置
y=event.pageY-canvasY；
elements.forEach（函数（元素）{
如果（x>element.left&&xelement.top&&yelement.left&&xelement.top&&y

一种方法是保留所有元素数据并编写hitTest（x，y）函数，但当您有许多复杂形状时，最好使用辅助画布以其ID而不是其中的颜色渲染元素，第二个画布中的x，y的颜色是hitted元素的ID，我应该提到的是，第二块画布是不可见的，它只是一个用于获取hitted元素的凝胶器

Github示例：

矩形hitTest的简单实现：

var Rectangle=函数（id、x、y、宽度、高度、颜色）{
this.id=id；
这个.x=x；
这个。y=y；
这个。宽度=宽度；
高度=高度；
this.color=color | |'#7cf'；
this.selected=false；
}
Rectangle.prototype.draw=函数（ctx）{
ctx.fillStyle=this.color；
ctx.fillRect（this.x，this.y，this.width，this.height）；
如果（选择此选项）{
ctx.strokeStyle='red'；
ctx.setLineDash（[5,5]）；
ctx.lineWidth=5；
ctx.strokeRect（这个.x，这个.y，这个.宽度，这个.高度）；
}
}
Rectangle.prototype.hitTest=函数（x，y）{
return（x>=this.x）&&&（x=this.y）&&&&（y）这篇文章听起来更像是一个编程作业，而不是一个问题。你能解释一下这段代码在做什么吗？到目前为止它有多少工作？你现在有什么问题吗？如果你在做一个游戏（我根据id猜），你可以看看pixi.js。这里有一个带有PNG和canvas的按钮示例：我也提出了一个问题，让它听起来不像是一个编程任务。我正在制作一个游戏，但我希望在没有外部库的情况下做所有事情。谢谢。你能详细说明这个问题中的代码吗？<代码的目的是什么>hitTest

函数表示“每当发生任何事件时，重新绘制画布”？这对于识别单击很有效，但我正在努力更改悬停时的颜色。请参见。只需向Rectangle类添加所选属性，并在draw方法中使用它，就像我所做的一样，我对代码进行一些更改，再次运行代码段Hanks！如果可以nge你的代码，这样当你停止在对象上悬停时，悬停边界就会消失。我接受这个答案。我只是删除了一个条件，它工作得很好，我写的github链接中还有一个高级的例子。

var c=document.getElementById('game'),
    canvasX=c.offsetLeft,
    canvasY=c.offsetTop,
    ctx=c.getContext('2d')
    elements = [];

c.style.background = 'grey';

function makeInteractiveButton(x, strokeColor, fillColor) {
    ctx.strokeStyle=strokeColor;
    ctx.fillStyle=fillColor;
    ctx.beginPath();
    ctx.lineWidth=6;
    ctx.arc(x, 475, 20, 0, 2*Math.PI);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    elements.push({
        arcX: x,
        arcY: 475,
        arcRadius: 20
    });
}

b1 = makeInteractiveButton(235, '#FFFCF8', '#FFB85D');

c.addEventListener('mousemove', function(event) {
    x=event.pageX-canvasX; // cursor location
    y=event.pageY-canvasY;

    elements.forEach(function(element) {
        if (x > element.left && x < element.left + element.width && 
            y > element.top && y < element.top + element.height) { // if cursor in rect
          alert('Rectangle should undergo 5 degree rotation and 105% scale');
        }
        else if (Math.pow(x-element.arcX, 2) + Math.pow(y-element.arcY, 2) < 
                 Math.pow(element.arcRadius, 2)) { // if cursor in circle
            alert('Set b1 fillColour to #FFC77E.');
        }
    });
}, false);

c.addEventListener('click', function(event) {
    x=event.pageX-canvasX; // cursor location
    y=event.pageY-canvasY;

    elements.forEach(function(element) {
        if (x > element.left && x < element.left + element.width && 
            y > element.top && y < element.top + element.height) { // if rect clicked
            alert('Move all cards to centre simultaneously.');
        }
        else if (Math.pow(x-element.arcX, 2) + Math.pow(y-element.arcY, 2) < 
                 Math.pow(element.arcRadius, 2)) { // if circle clicked
            alert('Set b1 fillColour to #FFDDB0.');
        }
    });
}, false);