画布按钮onmouseover更改颜色

Question

我有一个drawButtons函数，该函数接受“ nonhover ”，“ hover1 ”或“ hover2 ”作为参数，并绘制一个设置在画布上的新按钮，并根据所采用的参数将按钮绘制为不同的颜色。 当我从setUpGame()调用它时它确实起作用，但是当我从draw()调用它setUpGame() 。 我想从draw（）调用它，因为draw()在setInterval()每秒被调用80次。 这样，它可以继续检查鼠标是否悬停在按钮上方并绘制适当的按钮集。

setUpGame()在任何对象或函数之外被调用。 draw()由setInterval()调用，该函数在任何函数或对象之外。 setInterval调用每秒绘制80次。

getMouseOver()另一个函数实际上应该由draw()调用，因为它说“如果鼠标悬停在一个按钮上：drawButtons（“ hover1”）依此类推。当我按下按钮时，它不会绘制按钮称它为。

浏览器Javascript控制台中没有错误。 我正在使用最适合我的游戏的Chrome。

由此可以推断出drawButtons()从setUpGame()调用时没有问题。

draw()可能存在问题，因为当我从那里调用drawButtons()不起作用（但令我们感到困惑的是，当我从那里调用displayNumbers时，它确实显示了数字）并且在玩游戏时效果很好（这里我们不在玩游戏，我们在开始屏幕上）。

getMouseOver()可能存在问题，因为这在任何地方都不起作用。

现在，我将向您展示getMouseOver() 。 我的程序越来越大，从一开始就显示太多内容是不堪重负的。 我打算将此功能每秒调用80次。

getMouseOver: function() {
    window.onload = (function(){
        window.onmouseover = function(e) {
            // IE doesn't always have e here
            e = e || window.event;

            // get event location

            // change the code so that it gives the relative location
            var location = {
            x: e.pageX - offset.x,
            y: e.pageY - offset.y
            };
            if (location.x > 103.5 && location.x < 265.5) {
                if (location.y > 240 && location.y < 291) {
                    nonGameContent.drawButtons("hover1");
                }
            }
            if (location.x > 103.5 && location.x < 265.5) {
                if (location.y > 160 && location.y < 212) {
                    nonGameContent.drawButtons("hover2");
                }
            }
            else{
                nonGameContent.drawButtons("nonHover");
            }
        }
    })},

Answer 1

在这个小提琴中，您正在使用的click（）和onmousemove（）。 如果您要在按钮的开始显示或者只是将鼠标悬停在按钮的未来位置上的某个地方，我不太了解，但这是一个开始： http : //jsfiddle.net/Akinaru/3a7g2/57/

主要修改：

 canvas.onmousedown = nonGameContent.getMouseClick;
 canvas.onmousemove = nonGameContent.getMouseOver;

Answer 2

鼠标悬停时更改画布矩形的颜色，使用onmousemove查找是否在其上方，然后使用其他颜色的矩形重新绘制画布

getMouseClick：function（）{window.onmousemove = function（e）{