对使用 javascript/canvas 创建的形状进行动画处理
我是个新手，对 javascript 也很陌生。我正在尝试学习如何使用 JavaScript/html5/canvas。我一直在学习几个教程。我已经浏览了有关形状动画的内容，但还找不到一个好的绘制形状对用户输入做出反应的内容。 就像鼠标滑过矩形会导致颜色变化一样。 或者更好的是最终是这样的。
http://dan.forys.co.uk/experiments/mesmerizer/
任何人都可以给我一个很好的教程来实现这一目标吗？ 谢谢 丹妮拉
I am sort of new here and new to javascript. i am trying to learn how to work JavaScript/html5/canvas. I have been working my way through several tutorials. I have gone trough the ones about animating a shape but can not find a good one yet where a drawn shape reacts to user input.
Like a mouse going over a rectangle resulting in a color change.
Or even better eventually something like this.
http://dan.forys.co.uk/experiments/mesmerizer/
can anyone one point me to a good tutorial to achieve that?
thank you
Daniela
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
首先要澄清一件事，画布本身并不太了解其上的内容。它可以告诉你像素是什么颜色，但它不能告诉你这里是矩形还是那里是圆形。出于我们的目的，请考虑画布是只写的。如果您想在您的应用程序中考虑使用 SVG，则 SVG 中存在类似的功能，但需要注意的是画布得到了更普遍的支持。
了解鼠标下方的内容确实与您的应用程序有关。在您发布的示例中，开发人员从鼠标事件中获取了 X 和 Y 位置（使用 jQuery），并进行了一些快速数学运算来计算您所在的行和列。然后他们可以将其应用于俗语“单元格（x , y) 只是将鼠标悬停在上面，当您进行下一次重绘时请考虑这一点。”
Canvas 应用程序通常按以下方式工作：
考虑到这一点，任何教程都应该有所帮助，无论是 Java、.Net、Android 等。它们都有自己的绘图界面和基于它们的教程。
关于画布，这里有一个有趣的教程： http://billmill.org/static/canvastutorial/ index.html
本教程构建了一个侦听鼠标事件和计时器事件的突围游戏。鼠标事件不会执行任何检查来查看其结束内容，但计时器事件会执行一些工作来检查球是否与块或球拍存在于同一空间中，并相应地更新画布和 JavaScript 环境。
First to clarify one thing, the canvas itself doesn't know very much about what's on it. It can tell you what color a pixel is but it can't tell you a rectangle is here or a circle is there. For our purposed, consider the canvas to be write-only. Functionality like that exists in SVG if you want to consider it for your application, with the caveat that the canvas is more universally supported.
Knowing what's under the mouse really relates to what your application is. In the example you posted, the developer took the X and Y position from the mouse event (using jQuery) and did some quick math to calculate what row and column you were in. They could then apply that to an saying, "cell (x, y) was just moused over, when you do the next redraw consider that."
Canvas applications generally work the following way:
With that in mind, any tutorial should be helpful, be it for Java, .Net, Android, etc. They all have their own drawing surfaces and tutorials that build on them.
In regards to the canvas, here's a fun tutorial: http://billmill.org/static/canvastutorial/index.html
The tutorial builds a breakout game which listens to mouse events and timer events. The mouse event doesn't do any checking to see what its over, but the timer event does some work to check if the ball exists in the same space as a block or the paddle and updates the canvas and the JavaScript environment accordingly.