0

我在网页上有一个 HTML5 画布，带有一个在画布上绘制图像的 JavaScript 函数。我正在尝试向图像添加鼠标事件，以便在单击它时调用另一个 JavaScript 函数，它将更新画布上显示的内容。

在 Firefox 中查看页面时，单击画布上显示的图像时没有任何反应。我正在使用 Firebug 来尝试看看出了什么问题，它给了我以下消息：

 mouse_event is not defined
 drawStartButton()index.html (line 107)
 startGame()index.html (line 64)
 (?)()index.html (line 1)
 event = load
 [Break On This Error]  

 ...useX = (mouse_event.clientX-boundingBox.left) * (myGameCanvas.width/boundingBox....

 index.html (line 107)

我用来在画布上绘制开始按钮的函数，以及我添加的鼠标事件如下：

function drawStartButton(){
            image.onload = function(){
                context.drawImage(image, 260.5, 60);
            };
            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);
            var pixels = context.getImageData(mouseX, mouseY, 1, 1); }

基本上，我想做的就是当用户单击按钮时，将调用下面的函数，并更新画布的内容：

function drawLevelOneElements(){
            var context = canvas.getContext("2d");

            /* Draw the images for numbers 1-10.*/
            var image1 = new Image();
            /* Test that this code is being executed */
            context.moveTo(300, 300);
            context.font = "11pt Calibri";
            context.strokeStyle = "black";
            context.strokeText("Testing",300, 300);
            /* End of test */

            image1.onLoad = function(){
                context.drawImage(image1, 50, 50);
                };
            image1.src="1.png";
        }
4

1 回答 1

0

看来我可以通过将变量 mouseX、mouseY 和像素放在一个函数中并将boundingBox.onmousemove属性设置为等于这个函数来解决这个问题：

boundingBox.onmousemove = function(e){
                var mouseX = e.pageX - this.offsetLeft;
                var mouseY = e.pageY - this.offsetTop;
                var pixels = context.getImageData(mouseX, mouseY, 1, 1);
            }
于 2019-10-21T17:12:45.593 回答