Question

在浏览器中查看我的网页时，我在以下功能上遇到此控制台错误。

function drawStartButton(){
            image.onload = function(){
                context.drawImage(image, 260.5, 60);
                image.on("mousdown", function(){
                    drawLevelOneElements();
                }
            });
            image.src = "StartButton.png";
            /** Now I need to add an event listener to the area of the canvas on 
                on which the button image is displayed, in order to 'listen' for 
                a click on the button */
            var boundingBox = myGameCanvas.getBoundingClientRect();
            //var mouseX = (mouse_event.clientX-boundingBox.left) * (myGameCanvas.width/boundingBox.width);
            //var mouseY = (mouse_event.clientY-boundingBox.top) * (myGameCanvas.height/boundingBox.height);
            boundingBox.onmousemove = function(e){
                var mouseX = e.pageX - this.offsetLeft;
                var mouseY = e.pageY - this.offsetTop;
                var pixels = context.getImageData(mouseX, mouseY, 1, 1);
            }

            /** There maybe more than one pixel at this location so use a loop
                to test whether any of the pixels have an alpha value greater than
                0. With pixel data, 3 is alpha, so check data[3] and every fourth
                element in data after that. */
            //for (var i=3; i<pixels.data.length; i+=4;){
                /** If a non- zero alpha is found, stop and return "true"- the click
                    was on a part of the canvas that has colour on it. */
            //  if(pixels.data[i]!=0) return true;
            //}

            /** If the function gets here, then the mouse click wasn't on a painted
                part of the canvas. */
            //return false;
            /**myGameCanvas.getElementById("StartButton").onClick = function(e){
                drawLevelOneElements();
            } */    

        }

错误发生在从第二行开始的函数的末尾。最初，我只是简单地使用那条线;但在收到此错误后，我将其更改为}）;

然而，当我重新加载页面时，画布仍然是空白的，并且控制台正在抱怨同样的错误，即使我已插入a）它指示的位置。

我看了一下这个错误的一些建议主题，但是它们似乎都没有表明我需要做什么才能使这些函数显示它们在画布上的意义。有人有什么建议吗？

Answer 1

image.onload = function(){
                context.drawImage(image, 260.5, 60);
                image.on("mousdown", function(){
                    drawLevelOneElements();
                }
            });

应该是

image.onload = function(){
                context.drawImage(image, 260.5, 60);
                image.on("mousdown", function(){
                    drawLevelOneElements();
                })
            };

Answer 2

image.onload = function(){
    context.drawImage(image, 260.5, 60);
    image.on("mousdown", function(){
        drawLevelOneElements();
    }
});

需要：

image.onload = function(){
    context.drawImage(image, 260.5, 60);
    image.on("mousdown", function(){
        drawLevelOneElements();
    });
};

请注意上一个)

Answer 3

改变这个：

image.on("mousdown", function(){
                    drawLevelOneElements();
                }

到

image.on("mousdown", function(){
                    drawLevelOneElements();
                });

在参数列表之后丢失），即使我已经添加了a）指示的地方

3 个答案: