畫布按鈕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）{