HTML5 Canvas-在鼠标单击时在鼠标坐标处添加图像 [英] HTML5 Canvas - Add image on mouse click, at mouse coordinates

问题描述

好的，我已经尝试了好几个小时了，我什么都找不到。

Alright guys, I have been trying to get this for hours now, I cannot find anything.

有人可以键入快速脚本，或者将我指向

Can someone type up a quick script, or point me in the direction of a tutorial for this..

当用户单击画布时，我想在画布上显示图像（imgObj）。我希望图像显示在用户单击时鼠标所在的坐标处。

I want to have an image (imgObj) come up on the canvas when the user clicks on the canvas. I want the image to come up at the coordinates that the mouse is at when the user clicks.

有什么想法吗？

非常感谢！

推荐答案

您可以从此处开始： http://www.html5canvastutorials.com/

这是有关HTML5画布的教程。

This is a tutorial on the HTML5 Canvas.

KineticJS是一个使这变得非常简单的库： http：// www。 dynamicjs.com/

KineticJS is a library that makes this really easy: http://www.kineticjs.com/

基本上，通过KineticJS，您可以使用以下方法实现目标：

essentially with KineticJS you can use the following methods to achieve your goal:

container.on("mousedown", function(){
      image.show();
 });

container.on("dragmove", function(){
     var mousePos = container.getMousePosition();
     var x = mousePos.x;
     var y = mousePos.y;
     image.move( x, y )
});

container.on("dragend"), function(){
     image.hide();
});

这篇关于HTML5 Canvas-在鼠标单击时在鼠标坐标处添加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！