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

问题描述：

<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（）函数是开始。我画画布，并在画布上显示行星。请参阅图片。 This is when javascript on running image. 他们有一个地球，水星，金星。这个星球是所有对象....如果我认为...

我想点击事件时，用户点击“地球”对象..但我不知道该怎么做.... 我应该指什么？请给我建议..！谢谢。

答

你不能，真的。当您在画布上绘图时，您实际上是在绘制一个大的位图图像。你画的形状被添加到它，就是这样。它们实际上不是物体。

你有两个选择：

赶上从canvas元素的click事件，让鼠标的坐标，并用它来推断单击了哪个对象。
使用库如EaselJS。这是围绕画布的一种API，使得使用它更容易。它将允许您将点击处理程序附加到画布上的对象。

答

你基本上需要跟踪你的行星在画布上的位置，然后在画布上设置一个事件监听器。从那里你可以获取点击事件的坐标，并通过你所有的行星进行测试。

HTML：

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

获取canvas元素：

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

要将点击事件添加到您的canvas元素，使用...

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

检查this例如与信息约@Brother Woodrow sai d

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

相关推荐