如何单击使用javascript画布中的对象的事件？

Question

This is my script code.. 这是我的脚本代码。

<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>

The code is when browser open, startGame() function is start. 该代码是在打开浏览器时启动startGame（）函数。 I draw canvas, and show planets on the canvas. 我画画布，并在画布上显示行星。 Please refer to the image. 请参考图片。 This is when javascript on running image. 这是当JavaScript在运行图像上时。 Their has a Earth, Mercury, Venus. 他们有一个地球，水星，金星。 That planet is all object....If i thinks... 那个星球都是物体...。如果我认为...

I want to click event when users click on "Earth" object.. But I don't know how to do that.... What should I refer to? 当用户单击“地球”对象时，我想单击事件。但是我不知道该怎么做。...我应该指的是什么？ Please advice to me..! 请给我建议..！ Thanks. 谢谢。

Answer 1

You can't, really. 你不能，真的。 When you're drawing on a canvas you're essentially drawing one big bitmap image. 在画布上绘制时，实际上是在绘制一个大的位图图像。 The shapes you draw get added to it and that's it. 您绘制的形状将添加到其中，仅此而已。 They're not actually objects. 它们实际上不是对象。

You have two options: 您有两种选择：

Catch the click event from the canvas element, get the mouse coordinates and use that to infer which object was clicked. 从canvas元素捕获click事件，获取鼠标坐标，并使用该坐标推断单击了哪个对象。
Use a library like EaselJS . 使用类似EaselJS的库。 It's sort of an API around the canvas that makes working with it much easier. 它是一种画布上的API，使使用起来更加容易。 It will allow you to attach click handlers to the objects on the canvas. 它将允许您将单击处理程序附加到画布上的对象。

Answer 2

You're basically going to have to track where your Planets are on the canvas, then set up an event listener on the canvas itself. 基本上，您将必须跟踪“行星”在画布上的位置，然后在画布本身上设置事件侦听器。 From there you can take the coordinates of the click event and go through all your Planets to test. 从那里，您可以获取click事件的坐标，并遍历所有Planets进行测试。

HTML: HTML：

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

Get canvas element: 获取画布元素：

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

To add a click event to your canvas element, use... 要将click事件添加到画布元素，请使用...

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

Check this example with informations about @Brother Woodrow said 检查这与上述有关@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