如何单击使用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