javascript - 您将如何根据创建的 Canvas 形状创建粒子 SURFACE 发射器？ HTML Canvas JS

Question

我有一个使用 html canvas 函数创建的形状(四分之一圆):

• 移动到
• LineTo
• QuadraticCurveTo

如何将形状爆炸成粒子，然后将它们返回形成一个圆圈？

Answer 1

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

1. 创建永远不会出现在页面上的内存 Canvas (使用 document.createElement('canvas'))。该 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:您的普通 Canvas 很可能不会与要分解的对象大小相同。也许对象被放置在 100,100，所以你真的点击了 110, 115 而不是 10,15。为了简单起见，我省略了该偏移量。