2

I have a shape (a quarter circle) that I've created using the html canvas function:

  • moveTo
  • LineTo
  • QuadraticCurveTo

How do I go about exploding the shape into particles and then return them to form a circle?

4

1 回答 1

1

我不会为你编写代码，因为这需要一些时间，而且我相信你可以在网上找到示例，但我会告诉你为了做出这样的事情你需要知道的理论.

  1. 创建一个document.createElement('canvas')永远不会在页面上看到的内存中画布（使用 ）。此画布必须至少与您的对象一样大。我将假设它与您的对象一样大。我们会打电话给它tempCanvas，它有tempCtx
  2. 将您的对象绘制到 tempCtx。
  3. 将会有一些你没有具体提到的事件，但我相信你已经记住了。您可以按下按钮或单击对象，它会“爆炸”。为了挑选一些东西，我假设你希望它在点击时爆炸。

所以要做爆炸：

  1. 将对象绘制到您的正常上下文中：ctx.drawImage(tempCanvas, x, y)以便用户看到某些东西
  2. 您将需要一个像素数组来表示 tempCanvas 中每个像素的位置。因此，如果 tempCanvas 为 20x30，您将需要一个[20][30]对应的数组。
  3. 您必须保留每个像素的数据。具体来说，他们的起点，这很简单，因为像素[2][4]的起点是(2,4)！还有它们的当前位置，最初与起点相同，但在每一帧都会改变。
  4. 当爆炸事件发生时，跟踪原始鼠标 x 和 y 位置。
  5. 此时，对于每个像素，您都有一个矢量，这意味着您有一个方向。如果您单击对象的中间，您将希望保存 (10,15) 的鼠标坐标（见注 1）。所以现在待爆炸图像的所有像素都有自己的轨迹。我认为这里有一些数学是理所当然的，但如果你在 SO 或互联网上搜索单独的主题，你会发现如何找到这些线的斜率/等并继续它们。
  6. 对于此后的每一帧，您必须获取每个像素[x][y]并使用ctx.drawImage(tempCanvas, x, y, 1, 1, newX, newY, 1, 1)x 和 y 与像素相同的[x][y]位置，并且使用向量计算 newX 和 newY 并找到沿其线的下一个点。

结果将是图像的每个像素都被绘制在稍微远离原始点击点的位置。如果您继续逐帧执行此操作，它看起来好像对象已爆炸。

无论如何，这是一般的想法。让我知道是否有任何不清楚的地方。

注意 1：您的普通画布很可能与要爆炸的对象大小不同。也许对象被放置在 100,100，所以你真的点击了 110、115 而不是 10,15。为了简单起见，我省略了该偏移量。

于 2012-01-13T19:30:11.180 回答