How do I click on an event that uses an object in the javascript canvas?
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. I draw canvas, and show planets on the canvas. Please refer to the image. This is when javascript on running image. 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.
2 answers
solution1
1 ACCPTED 2017-04-17 12:36:01
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
clickevent from the canvas element, get the mouse coordinates and use that to infer which object was clicked. - Use a library like EaselJS . It's sort of an API around the canvas that makes working with it much easier. It will allow you to attach click handlers to the objects on the canvas.
solution2
0 2017-04-17 12:35:25
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.
HTML:
<form id="myCanvas" ... >
</form>
Get canvas element:
var Earth = document.getElementById('myCanvas');
To add a click event to your canvas element, use...
Earth.addEventListener('click', function() { }, false);
Check this example with informations about @Brother Woodrow said
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.