canvas confetti
1.9.3
catdad.github.io/canvas-confetti
您可以從NPM中安裝此模塊作為組件：
npm install --save canvas-confetti然後，您可以require('canvas-confetti');在項目構建中使用它。注意：這是客戶端組件，不會在節點中運行。您需要使用WebPack之類的東西來構建您的項目，以便使用此項目。
您還可以直接從CDN中包含此庫：
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js " > </ script >注意：您應該在包含項目時使用最新版本。您可以在發行頁面上查看所有版本。
感謝您加入我的網站上有關動作的非常重要的信息。看到，並不是每個人都喜歡它，有些人實際上不喜歡運動。他們有辦法告訴我們有關它的信息，我們應該傾聽。雖然我不想告訴您不要在頁面上有五彩紙屑，但我確實想讓您輕鬆尊重用戶想要的東西。您可以使用一個disableForReducedMotion選項，以便在混亂動畫上遇到麻煩的用戶不需要在您的網站上掙扎。默認情況下，這是禁用的，但是我正在考慮將來在未來的主要版本中進行更改。如果您對此有強烈的感覺，請告訴我。目前，請負責任地蒙面。
從npm安裝時，可以在項目構建中作為客戶端組件需要此庫。當使用CDN版本時，它會在window上顯示為confetti函數。
confetti([options {Object}]) → Promise|null confetti採用一個可選對象。當window.Promise可用時，它將返回承諾，讓您知道何時完成。如果承諾不可用（例如在IE中），它將返回null 。您可以使用任何受歡迎的多填充物來多填充承諾。您還可以通過以下方式提供confetti的承諾實施：
const MyPromise = require ( 'some-promise-lib' ) ;
const confetti = require ( 'canvas-confetti' ) ;
confetti . Promise = MyPromise ;如果您在完成之前多次致電confetti ，則每次都會返回相同的諾言。在內部，將重複使用相同的帆布元素，並使用新的五彩紙屑繼續現有動畫。所有動畫都完成後，每次致電confetti的承諾將解決。
options confetti參數是一個可選的options對象，該對象具有以下屬性：
particleCount INTEGER（默認值：50） ：要啟動的五彩紙屑數。更多總是很有趣...但是要酷，涉及很多數學。angle數（默認值：90） ：以程度啟動五彩紙屑的角度。 90是直接的。spread數字（默認值：45） ：五彩紙屑可以以多個程度走多遠。 45表示五彩紙屑將以定義的angle加上或負22.5度發射。startVelocity編號（默認值：45） ：五彩紙屑以像素的開始速度。decay編號（默認值：0.9） ：五彩紙屑會損失速度的速度。保持這個數字在0到1之間，否則五彩紙屑將提高速度。更好的是，永遠不要改變它。gravity數（默認值：1） ：將顆粒拉下來的速度。 1是全重力，0.5是一半的重力等，但沒有限制。如果願意，您甚至可以使粒子上升。drift號碼（默認值：0） ：五彩紙屑會漂移多少。默認值為0，這意味著它們會直截了當。使用負數為左數，右數為正數。flat Boolean（默認值：false） ：可選地關閉三維五五五維五彩紙屑在現實世界中所擁有的傾斜和擺動。是的，他們看起來有些難過，但是你們都要求他們，所以不要怪我。ticks號（默認值：200） ：五彩紙屑將移動多少次。這是抽象的...但是如果五彩紙屑對您來說太快消失了，請使用它。origin對象：從哪裡開始發射五彩紙屑。如果願意，請隨時發射屏幕。origin.x號（默認值：0.5） ：頁面上的x位置，為0為左邊緣， 1為右邊緣。origin.y編號（默認值：0.5） ：頁面上的y位置，其中0是頂部邊緣， 1是底部邊緣。colors數組<string> ：以十六進制格式的一系列顏色字符串...您知道，就像#bada55一樣。shapes數組<string | Shape> ：五彩紙屑的形狀數組。有3個內置值的square ， circle和star 。默認值是將兩個方塊和圓圈均勻混合在一起。要使用單一形狀，您只能在數組中提供一種形狀，例如['star'] 。您還可以通過提供['circle', 'circle', 'square']之類的值來更改混合物，以使用三個第三個圓圈和三個正方形。您還可以使用confetti.shapeFromPath或confetti.shapeFromText輔助方法來創建自己的形狀。scalar號（默認值：1） ：每個五彩紙屑粒子的比例因子。使用小數使五彩紙屑變小。繼續，嘗試青少年的小五彩紙屑，它們很可愛！zIndex Integer（默認值：100） ：畢竟，五彩紙屑應位於頂部。但是，如果您有一個瘋狂的高頁面，則可以將其設置得更高。disableForReducedMotion boolean（默認值：false） ：完全使用減少運動的用戶禁用五彩紙屑。在這種情況下， confetti()承諾將立即解決。confetti.shapeFromPath({ path, matrix? }) → Shape此助手方法可讓您使用SVG路徑字符串創建自定義的五彩紙屑形狀。儘管有一些警告，但任何有效的路徑都應起作用：
canvas-confetti庫，最好重新生成和重新調整矩陣。Path2D的瀏覽器，這確實應該是主要的瀏覽器。此方法將返回Shape - 實際上只是一個具有某些屬性的普通對象，但是...我們假裝它是一種形狀。將此Shape對象直接傳遞到shapes陣列中。
例如，這是您可以做三角形五彩紙屑的方法：
var triangle = confetti . shapeFromPath ( { path : 'M0 10 L5 0 L10 10z' } ) ;
confetti ( {
shapes : [ triangle ]
} ) ;confetti.shapeFromText({ text, scalar?, color?, fontFamily? }) → Shape這是呈現表情符號五彩紙屑的備受期待的功能！使用任何標準的Unicode表情符號。或其他文字，但是...也許不使用其他文本。
雖然任何文本都可以起作用，但有一些警告：
scalar量值來擴展五彩紙屑，請在創建形狀時在此處使用相同的scalar量值。這將確保五彩紙屑不模糊。此方法的選項是：
options Object ：text String ：要呈現為五彩紙屑的文本。如果您不能下定決心，我建議“？”。scalar Number, optional, default: 1 ：相對於默認大小的比例值。它匹配五彩紙屑選項中的scalar量值。color String, optional, default: #000000 ：用於渲染文本的顏色。fontFamily String, optional, default: native emoji ：呈現文本時要使用的字體姓氏。默認值遵循的最佳實踐是呈現設備的本機OS表情符號的最佳實踐，並落到了sans-serif 。如果使用Web字體，請在呈現五彩紙屑之前確保已加載此字體。 var scalar = 2 ;
var pineapple = confetti . shapeFromText ( { text : '?' , scalar } ) ;
confetti ( {
shapes : [ pineapple ] ,
scalar
} ) ;confetti.create(canvas, [globalOptions]) → function此方法創建了使用自定義畫布的confetti函數實例。如果您想限制五彩紙屑出現的頁面上的區域，這將很有用。默認情況下，此方法不會以任何方式修改畫布（除了繪製）。
雖然可以誤解畫布，所以讓我解釋一下為什麼您可能想讓模塊對畫布進行一些修改。默認情況下， canvas是一個相對較小的圖像 - 根據瀏覽器，大約300x150。當您使用CSS調整大小時，這將設置畫布的顯示大小，而不是在該畫布上表示的圖像。可以將其視為將300x150 JPEG圖像加載到img標籤中，然後將該標籤的CSS設置為1500x600 ，您的圖像最終會伸展和模糊。對於畫布，您還需要設置畫布圖像本身的寬度和高度。如果您不想這樣做，則可以允許confetti為您設置。
還要注意，您應該堅持自定義實例，並避免多次使用相同的帆布元素初始化五彩紙屑實例。
可用以下全局選項：
resize布爾值大小（默認值：false） ：是否允許設置帆布圖像大小，並在窗口更改大小（例如調整窗口，旋轉移動設備等）時正確尺寸。默認情況下，畫布大小不會修改。useWorker BOOLEAN（默認值：false） ：是否使用異步的Web Worker在可能的情況下呈現五彩紙屑動畫。默認情況下，這將關閉，這意味著動畫將始終在主線程上執行。如果打開並瀏覽器支持它，則動畫將執行主線程，以免阻止您的頁面需要執行的任何其他工作。使用此選項還將修改畫布，但在下面直接進行更多內容 - 請閱讀。如果瀏覽器不支持它，則將忽略此值。disableForReducedMotion boolean（默認值：false） ：完全使用減少運動的用戶禁用五彩紙屑。設置為TRUE時，使用此五彩紙屑實例將始終尊重用戶對減少運動的要求，並為其禁用五彩紙屑。重要的是：如果您使用useWorker: true ，我現在擁有您的畫布。現在是我的，我可以用它做任何想做的事情（不用擔心……我保證，我只是把五彩紙屑放在其中）。您不得嘗試以任何方式使用畫布（我猜除了將其從DOM中刪除），因為它會丟棄錯誤。當使用工人進行渲染時，必須將畫布的控制轉移到Web Worker上，以防止在主線程上使用該畫布。如果您必須以任何方式操縱畫布，請不要使用此選項。
var myCanvas = document . createElement ( 'canvas' ) ;
document . body . appendChild ( myCanvas ) ;
var myConfetti = confetti . create ( myCanvas , {
resize : true ,
useWorker : true
} ) ;
myConfetti ( {
particleCount : 100 ,
spread : 160
// any other options from the global
// confetti function
} ) ;confetti.reset()停止動畫並清除所有五彩紙屑，並立即解決任何杰出的承諾。如果使用confetti.create共式五彩紙屑實例，該實例將具有自己的reset方法。
confetti ( ) ;
setTimeout ( ( ) => {
confetti . reset ( ) ;
} , 100 ) ; var myCanvas = document . createElement ( 'canvas' ) ;
document . body . appendChild ( myCanvas ) ;
var myConfetti = confetti . create ( myCanvas , { resize : true } ) ;
myConfetti ( ) ;
setTimeout ( ( ) => {
myConfetti . reset ( ) ;
} , 100 ) ; 以默認方式啟動一些五彩紙條：
confetti ( ) ;推出一堆五彩紙屑：
confetti ( {
particleCount : 150
} ) ;推出一些五彩紙屑真的很廣：
confetti ( {
spread : 180
} ) ;發揮創意。從頁面的一個隨機部分啟動五彩紙屑的小po：
confetti ( {
particleCount : 100 ,
startVelocity : 30 ,
spread : 360 ,
origin : {
x : Math . random ( ) ,
// since they fall down, start a bit higher than random
y : Math . random ( ) - 0.2
}
} ) ;我說創意...我們可以做得更好。由於我們稱之為confetti次數（只是空中五彩紙屑的總數）無關緊要，因此我們可以做一些有趣的事情，例如從多個方向上不斷啟動越來越多的五彩紙屑：
// do this for 30 seconds
var duration = 30 * 1000 ;
var end = Date . now ( ) + duration ;
( function frame ( ) {
// launch a few confetti from the left edge
confetti ( {
particleCount : 7 ,
angle : 60 ,
spread : 55 ,
origin : { x : 0 }
} ) ;
// and launch a few from the right edge
confetti ( {
particleCount : 7 ,
angle : 120 ,
spread : 55 ,
origin : { x : 1 }
} ) ;
// keep going until we are out of time
if ( Date . now ( ) < end ) {
requestAnimationFrame ( frame ) ;
}
} ( ) ) ;
