Question

首先是我的代码..

<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。我尝试了很多选项和教程，但没有任何作用.... 请问有人帮帮我吗？非常感谢！

Answer 1

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

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."); };

如果这对您不起作用，请描述您的期望以及这些答案是否符合这些期望。

此外，以下link to the MDN将帮助您解决此类语法问题。

HTML5 / JavaScript单击图像上的事件

1 个答案: