【发布时间】：2012-01-13 17:01:50
【问题描述】：
我有一个使用 html 画布函数创建的形状（四分之一圆）：
moveToLineToQuadraticCurveTo
如何将形状分解成粒子，然后将它们返回形成一个圆圈？
【问题讨论】：
标签： javascript canvas eventemitter particles
【发布时间】：2012-01-13 17:01:50
【问题描述】：
我不打算为您编写代码，因为这需要一些时间，而且我相信您可以在网上找到示例，但我会告诉您需要了解的理论以便制作这样的事。
- 创建一个永远不会在页面上看到的内存画布（使用
document.createElement('canvas')）。此画布必须至少与您的对象一样大。我将假设它与您的对象一样大。我们称之为tempCanvas，它有tempCtx - 将您的对象绘制到 tempCtx。
- 可能会有一些您没有准确提及的事件，但我相信您已经记住了。您可以按下按钮或单击对象，它会“爆炸”。为了挑选一些东西，我假设您希望它在点击时爆炸。
所以要做爆炸：
- 将对象绘制到您的正常上下文中：
ctx.drawImage(tempCanvas, x, y)以便用户看到一些东西 - 您将需要一个像素数组来表示 tempCanvas 中每个像素的位置。因此，如果 tempCanvas 为 20x30，您将需要一个
[20][30]数组来对应。 - 您必须保留每个像素的数据。具体来说，他们的起点，很简单，因为像素[2][4]的起点是(2,4)！还有它们的当前位置，一开始与起点相同，但每帧都会发生变化。
- 当爆炸事件发生时，跟踪鼠标的原始 x 和 y 位置。
- 此时，对于每个像素，您都有一个矢量，这意味着您有一个方向。如果您单击对象的中间，您需要保存 (10,15) 的鼠标坐标（见注 1）。所以现在待爆炸图像的所有像素都有自己的轨迹。我认为这里有一些数学是理所当然的，但如果你在 SO 或互联网上搜索单独的主题，你会发现如何找到这些线的斜率/等并继续它们。
- 对于此后的每一帧，您必须获取每个像素
[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。为了简单起见，我省略了该偏移量。
【讨论】：