1

I'm getting this console error on the following function when viewing my web page in the browser.

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();
            } */    

        }

The error occurs at the end of the function that starts on the second line. Initially, I had that line just as simply }; but after getting this error, I changed it to });

However, when I reload the page, the canvas is still blank, and the console is complaining about the same error, even though I've inserted a ) where it indicated.

I had a look on the at some of the suggested topics for this error, but none of them seemed to indicate what I need to do to make the functions display what they're meant to on the canvas. Anyone have any suggestions?

4

3 回答 3

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();
                })
            };
于 2012-04-23T15:44:26.863 回答
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();
    });
};

注意最后)

于 2012-04-23T15:46:25.910 回答
0

改变这个：

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

至

image.on("mousdown", function(){
                    drawLevelOneElements();
                });
于 2012-04-23T15:44:18.300 回答