HTML5/JavaScript图像点击事件

HTML5 / JavaScript Clickevent on Image

本文关键字：事件 图像 JavaScript HTML5      更新时间：2023-09-26

首先是我的代码。。

<canvas id="myCanvas" width="640" height="480">
</canvas>


<script type="text/javascript">
    // Javascript Goes Here
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var width = canvas.getAttribute('width');
    var height = canvas.getAttribute('height');
    //Images variables
    var bgImage = new Image();
    var playImage = new Image();
    var shipImage = new Image();
    var instructImage = new Image();
    var logoImage = new Image();
    //Arrays for position of Images
    var buttonX = [196, 196, 150, 160];
    var buttonY = [100, 140, 12, 150];
    var buttonWidth = [96, 260, 182, 160];
    var buttonHeight = [40, 40, 40, 40];


    //Source of Images
    bgImage.src = "Images/Background.png";
    playImage.src = "Images/play.png";
    //shipImage.src = "Images/enemy.png";
    instructImage.src = "Images/instructions.png";
    logoImage.src = "Images/logo.png";

    //drawing Images 
    bgImage.onload = function () {
        context.drawImage(bgImage, 0, 0);
    };
    playImage.onload = function () {
        context.drawImage(playImage, buttonX[0], buttonY[0]);
    };
    instructImage.onload = function () {
        context.drawImage(instructImage, buttonX[1], buttonY[1])
    }
    logoImage.onload = function () {
        context.drawImage(logoImage, buttonX[2], buttonY[2])
    }
    //shipImage.onload = function () {
    //    context.drawImage(shipImage, buttonX[3], buttonY[3])
    //}

我想要的是在播放和指令图像上有一个简单的ClickListener。我尝试了很多选项和教程，但都不起作用。。。。有人能帮我吗？非常感谢！

您可以使用以下命令注册处理程序：

playImage.addEventListener("click", function(){
  alert("Play was clicked.");
});
instructImage.addEventListener("click", function(){
  alert("Instruct was clicked.");
});

或者，这可能也适用于您：

playImage.onclick = function() { alert("Play was clicked."); };
instructImage.onclick = function () { alert("Instruct was clicked."); };

如果这对你不起作用，描述一下你的期望，以及这个答案是如何没有达到的。

此外，下面的MDN链接将在将来帮助您解决类似的语法问题。

相关文章：