如何單擊使用javascript畫布中的對象的事件？

Question

這是我的腳本代碼。

<body onload= "startGame()">
<script>
var Earth;
var Mercury;
var Venus;

function startGame() {
    Earth = new component(152, 183, 'earth.png', 800, 75);
    Mercury = new component(122,151, 'mercury.png', 300, 400);
    Venus = new component(152, 183, 'venus.png', 520, 240);
    GameArea.start();   
}

var GameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 1000;
        this.canvas.height = 642;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas,         document.body.childNodes[0]);

        this.interval = setInterval(updateGameArea, 20);
    },

    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

//make game pieces
function component(width, height, color, x, y) {
    this.type = "image";
    this.image = new Image();
    this.image.src = color;

    this.width = width;   this.height = height;
    this.x = x;           this.y = y;

    this.update = function() {
        ctx = GameArea.context;
        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
    }
}

function updateGameArea() {
    GameArea.clear();
    Earth.update();
    Mercury.update();
    Venus.update();
}
</script>
</body>

該代碼是在打開瀏覽器時啟動startGame（）函數。 我畫畫布，並在畫布上顯示行星。 請參考圖片。 這是當JavaScript在運行圖像上時。 他們有一個地球，水星，金星。 那個星球都是物體...。如果我認為...

當用戶單擊“地球”對象時，我想單擊事件。但是我不知道該怎么做。...我應該指的是什么？ 請給我建議..！ 謝謝。

Answer 1

你不能，真的。 在畫布上繪制時，實際上是在繪制一個大的位圖圖像。 您繪制的形狀將添加到其中，僅此而已。 它們實際上不是對象。

您有兩種選擇：

從canvas元素捕獲click事件，獲取鼠標坐標，並使用該坐標推斷單擊了哪個對象。
使用類似EaselJS的庫。 它是一種畫布上的API，使使用起來更加容易。 它將允許您將單擊處理程序附加到畫布上的對象。

Answer 2

基本上，您將必須跟蹤“行星”在畫布上的位置，然后在畫布本身上設置事件偵聽器。 從那里，您可以獲取click事件的坐標，並遍歷所有Planets進行測試。

HTML：

<form id="myCanvas" ... >
</form>

獲取畫布元素：

var Earth = document.getElementById('myCanvas');

要將click事件添加到畫布元素，請使用...

Earth.addEventListener('click', function() { }, false);

檢查這與上述有關@Brother伍德羅信息例如

如何單擊使用javascript畫布中的對象的事件？

問題描述

2 個解決方案

解決方案1
1 已采納 2017-04-17 12:36:01

解決方案2
0 2017-04-17 12:35:25

如何單擊使用javascript畫布中的對象的事件？

問題描述

2 個解決方案

解決方案1 1 已采納 2017-04-17 12:36:01

解決方案2 0 2017-04-17 12:35:25

解決方案1
1 已采納 2017-04-17 12:36:01

解決方案2
0 2017-04-17 12:35:25