为使用 javascript/canvas 创建的形状设置动画

Question

我是这里的新手，也是 javascript 的新手。我正在尝试学习如何使用 JavaScript/html5/canvas。我一直在学习几个教程。我已经了解了关于动画形状的那些，但还没有找到一个好的，其中绘制的形状会对用户输入做出反应。 就像鼠标在矩形上移动导致颜色变化一样。 或者甚至更好最终是这样的。

http://dan.forys.co.uk/experiments/mesmerizer/

谁能给我一个很好的教程来实现这一点？ 谢谢 丹妮拉

Answer 1

首先要澄清一件事，画布本身并不太了解它上面的内容。它可以告诉你像素是什么颜色，但不能告诉你这里是矩形还是那里是圆形。出于我们的目的，将画布视为只写。如果您想为您的应用程序考虑 SVG 中存在类似的功能，但需要注意的是，画布得到了更普遍的支持。

了解鼠标下方的内容与您的应用程序真正相关。在您发布的示例中，开发人员从鼠标事件中获取 X 和 Y 位置（使用 jQuery）并进行了一些快速数学计算来计算您所在的行和列。然后他们可以将其应用于“单元格（x , y) 刚刚被鼠标悬停，下次重绘时请考虑一下。”

Canvas 应用程序通常按以下方式工作：

1. 完全在 JavaScript 中创建环境（包含数组、对象等）。
2. 使用渲染例程将环境绘制到画布上。
3. 监听鼠标事件、定时器等
4. 检查事件如何影响环境。
5. 将更改应用到环境。
6. 重复使用第 2 步中的渲染例程以使用新环境更新画布。
7. 转到第 3 步。

考虑到这一点，任何教程都应该有所帮助，无论是 Java、.Net、Android 等。它们都有自己的绘图表面和基于它们的教程。

关于画布，这里有一个有趣的教程：http://billmill.org/static/canvastutorial/index.html

本教程构建了一个监听鼠标事件和计时器事件的突围游戏。鼠标事件不会做任何检查来查看它的结束，但计时器事件会做一些工作来检查球是否存在于与块或桨相同的空间中，并相应地更新画布和 JavaScript 环境。