html5, adding an eventlistener to a drawn image on canvas
I am experimenting with html5 and I have a little image dropdown, the user selects and image and it draws it to the canvas using drawImage();
I can't seem to figure out how to add an event listener to the newly drawn image on the canvas.
I have tried putting it in a variable like so:
var newImg = ctx.drawImage(myImage, 200, 200);
开发者_高级运维and then adding an eventlistener to that, but it doesn't seem to work.
newImg.addEventListener('mousedown', onImgClick, false);
What is the correct way to do this.
If you're looking for this sort of interactivity, <canvas>
is probably not what you want. You're looking for SVG. There is a fantastic library called Raphaël that makes working with SVG a piece of cake on all browsers, even on IE6. It's also completely compatible with jQuery, so you can do:
var paper = Raphael(10, 50, 320, 200);
var img = paper.image("/path/to/img.png", 10, 10, 80, 80);
$(img).click(onImgClick);
I'm pretty certain this will treat you better and be easier to use than <canvas>
.
Note: Raphaël does come with some helpers for basic events like "click" and "mousedown", just do img.click(onImgClick)
, but if you're already using a library like jQuery, which you probably are, I'd recommend being consistent and using the library's event handling.
Canvas is not a retained-mode drawing surface. It's just a flat image; there is no object inside it to bind events to, and drawImage
returns nothing.
You will have to detect clicks on the <canvas>
and check if they are inside the [200, 200, 200+w, 200+h] rectangle manually. Or, if you want retained-mode drawing, consider using SVG instead of a canvas.
To do this without the help of JS:
Although you can't attach an event listener to the context on which you call drawImage(); you CAN attach event listeners to the Canvas itself.
myCanvasElement = document.getElementById('canvasElement');
myCanvasElement.addEventListener("click", someFunction, false);
If you need to have this per-image that you draw, you could probably stack the canvas objects and create a new one for each image you draw.
精彩评论