动画用/ javascript / canvas创建的形状

Question

我在这里是新手，也是javascript的新手。我正在尝试学习如何使用JavaScript / html5 / canvas。我一直在研究几个教程。我已经完成了关于动画形状的那些但是找不到一个好的但是绘制的形状对用户输入的反应。 就像鼠标越过矩形导致颜色变化。 甚至更好的是最终这样的事情。

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

任何人都可以指出一个很好的教程来实现这一目标吗？ 谢谢 丹妮拉

Answer 1

首先澄清一件事，画布本身并不知道它上面有什么。它可以告诉你像素是什么颜色，但它不能告诉你这里有一个矩形或者是一个圆圈。出于我们的目的，请将画布视为只写。 SVG中存在这样的功能，如果你想为你的应用程序考虑它，需要注意画布更普遍支持。

了解鼠标下面的内容确实与您的应用程序有关。在您发布的示例中，开发人员从鼠标事件中获取了X和Y位置（使用jQuery）并进行了一些快速数学运算来计算您所在的行和列。然后他们可以将其应用于一个说法“cell（x） ，y）刚被遗弃，当你做下一次重绘时考虑到这一点。“

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

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

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

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

本教程构建了一个分组游戏，用于监听鼠标事件和计时器事件。鼠标事件不会进行任何检查以查看其结束，但是timer事件会检查球是否与块或paddle在同一空间中，并相应地更新画布和JavaScript环境。