如何基於創建的畫布形狀創建粒子表面發射器？ 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。爲了簡單起見，我省略了該偏移量。