Javascript 使 html5 画布具有交互性
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8632369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making the html5 canvas interactive
提问by dualCore
Possible Duplicate:
How do I get the coordinates of a mouse click on a canvas element?
可能的重复:
如何获取鼠标在画布元素上单击的坐标?
I have yet another question regarding the html5 canvas. I've been making several cool projects with this feature in Javascript, but I'm now looking for ways to use the mouse to make the canvas more interactive. All I need is a simple way to set a variable to either the mouse's x value, or its y value.
我还有另一个关于 html5 画布的问题。我已经在 Javascript 中使用此功能制作了几个很酷的项目,但我现在正在寻找使用鼠标使画布更具交互性的方法。我所需要的只是一种将变量设置为鼠标的 x 值或其 y 值的简单方法。
Thanks!
谢谢!
回答by Diode
HTML5 Canvas is just a drawing plane and there is no display list. To add, remove, place objects using x,y and other properties first you need to define classes for containers and objects that can be added to the containers. Either you have to develop it yourself or you can use any one of the libraries available.
HTML5 Canvas 只是一个绘图平面,没有显示列表。要使用 x、y 和其他属性添加、删除、放置对象,首先需要为容器和可以添加到容器的对象定义类。要么你必须自己开发它,要么你可以使用任何一个可用的库。
A few months before I also started developing one library for the same purpose. I faced a lot of performance issues, so waiting for some free time to optimize my code. You can find the library here https://github.com/tracevipin/exspriteand some demos here http://www.exsprite.com/demos/
几个月前,我也开始为同样的目的开发一个库。我遇到了很多性能问题,所以等待一些空闲时间来优化我的代码。你可以在这里找到图书馆https://github.com/tracevipin/exsprite和一些演示在这里http://www.exsprite.com/demos/