圖像上的HTML5 / JavaScript Clickevent

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

如果這對您不起作用，請描述您的期望以及此答案無法滿足您的期望。

另外，以下指向MDN的鏈接將在將來幫助您解決此類語法問題。