如何根据创建的画布形状创建粒子表面发射器？ HTMLS 画布 JS

发布于 2024-12-27 09:13:49 字数 190 浏览 1 评论 0原文

我有一个使用 html canvas 函数创建的形状（四分之一圆）：

moveTo
LineTo
QuadraticCurveTo

我如何进行爆炸将形状分解为粒子，然后将它们返回形成圆形？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

長街聽風 2025-01-03 09:13:49

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

创建一个永远不会在页面上看到的内存中画布（使用 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)< /code> 其中 x 和 y 与像素的 [x][y] 相同，并且 newX 和 newY 是使用向量计算的，并找到沿其直线的下一个点。

结果将是在距离原始单击点稍远的位置绘制图像的每个像素。如果您继续一帧又一帧地执行此操作，就会看起来好像对象已经爆炸了。

无论如何，这就是总体想法。如果有任何不清楚的地方请告诉我。

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

I'm not going to write the code for you because it will take some time, and I'm sure you can find examples on the web, but I'll tell you the theory you need to know in order to make such a thing.

Create an in-memory canvas (using document.createElement('canvas')) that will never be seen on the page. This canvas must be at least as large as your object. I'm going to assume it is exactly as large as your object. We'll call this tempCanvas and it has tempCtx
Draw your object to tempCtx.
There will be some event that you didn't mention exactly but I'm sure you have in mind. Either you press a button or click on the object and it "explodes". For the sake of picking something I'll assume you want it to explode on click.

So to do the explosion:

Draw the object onto your normal context: ctx.drawImage(tempCanvas, x, y) so the user sees something
You're going to want to have an array of pixels for the location of each pixel in tempCanvas. So if tempCanvas is 20x30 you'll want an array of [20][30] to correspond.
You have to keep data for each of those pixels. Specifically, their starting point, which is easy, because pixel [2][4]'s starting point is (2,4)! And also their current location, which is identical to starting point at first but will change on each frame.
When the explosion event occurs keep track of the original mouse x and y position.
At this point for every single pixel you have a vector which means you have a direction. If you clicked in the middle of the object you'll want to save the mouse coordinates of (10,15) (see note 1). So now all of the pixels of the to-be-exploded image have their trajectory. There's a bit of math here that I'm taking for granted, but if you search separate topics either on SO or on the internet you'll find out how to find the slope/etc of these lines and continue them.
For every frame hereafter you must take each pixel [x][y] and use ctx.drawImage(tempCanvas, x, y, 1, 1, newX, newY, 1, 1) where x and y are the same as the pixel's [x][y] and the newX and newY are calculated using the vector and finding what the next point would be along its line.

The result will be each pixel of the image being drawn in a location that is slightly more away from the original click point. If you continue to do this frame after frame it will look as if the object has exploded.

That's the general idea, anyway. Let me know if any of it is unclear.

note 1: Most likely your normal canvas won't be the same size as the to-explode object. Maybe the object is placed at 100,100 so you really clicked on 110, 115 instead of 10,15. I'm omitting that offset just for the sake of simplicity.

回复收藏 0 原文

~没有更多了~