我有一个使用html canvas函数创建的形状（四分之一圆）：moveToLineToQuadraticCurveTo
如何将形状分解为粒子，然后将其返回形成一个圆？
最佳答案
我不会为您编写代码，因为这将花费一些时间，并且我敢肯定您可以在网络上找到示例，但是我将告诉您为实现这种目的而需要了解的理论。
创建一个内存画布（使用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或Internet上搜索单独的主题，则会发现如何找到这些线的斜率等。
此后，对于每一帧，您必须获取每个像素[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。我只是为了简单起见省略了该偏移量。