动画创建一个形状瓦特/ javascript/canvas

Question

我是一种新的在这里和新的JavaScript。我正在尝试学习如何使用JavaScript/html5/canvas。我一直在研究几个教程。我已经走过了那些关于动画形状的东西，但却找不到一个很好的形状，然而在绘制的形状对用户输入有反应的地方。 就像鼠标移过矩形导致颜色变化一样。 甚至更​​好，最终这样的事情。

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

谁能一点我一个很好的教程来实现这一目标？ 谢谢 Daniela

Answer 1

首先澄清一件事，画布本身并不太了解它的内容。它可以告诉你一个像素是什么颜色，但它不能告诉你一个矩形在这里或一个圆圈在那里。对于我们的目的，考虑画布是只写的。如果您想为您的应用程序考虑它，那么在SVG中就存在这样的功能，并且要警告画布更受通用支持。

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

画布应用通常的工作方式如下：

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

考虑到这一点，任何教程应该是有帮助的，是它为Java，.NET，Android等，他们都有自己的绘画表面和教程基础上加以。

在问候画布，这里是一个有趣的教程：http://billmill.org/static/canvastutorial/index.html

的教程建立一个突围赛监听鼠标事件和计时器事件。鼠标事件不会执行任何检查以查看结果，但计时器事件会检查球是否与块或桨板存在于相同的空间中，并相应地更新画布和JavaScript环境。