如何基于创建的画布形状创建粒子表面发射器？ HTMLS帆布JS

Question

我有一个形状（四分之一圆），我一直在使用的HTML画布功能创建：

• moveTo
• LineTo
• QuadraticCurveTo

我怎么去关于将形状爆炸成粒子，然后将它们返回形成一个圆圈？

Answer 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]和下一页末和newY使用矢量和寻找下一个点会沿着它的线什么的计算。

结果将是图像的每个像素被绘制在离原始点击点稍远的位置。如果您继续在框架之后执行此框架，它看起来好像物体已经爆炸。

无论如何，这是总体思路。让我知道如果有任何不清楚。

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