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 ) ;
}
} ( ) ) ;
