confetti.js是一款canvas彩色纸屑喷射粒子插件。-BFW插件库

confetti.js是一款canvas彩色纸屑喷射粒子插件。

使用方式：

1、npm

npm install --save canvas-confetti

2、cdn

配置参数

confetti({
  particleCount: 100,
  spread: 70,
  origin: { y: 0.6 }
});

options参数解析

该confetti参数是单个可选options对象，具有以下属性：

particleCount 整数（默认值：50）：要发射的五彩纸屑的数量。更多总是很有趣......但要冷静，这涉及到很多数学。

angle Number（默认值：90）：发射五彩纸屑的角度，以度为单位。90是直线上升的。

spread 数字（默认值：45）：五彩纸屑可以偏离中心多远，以度为单位。45 表示五彩纸屑将以定义的angle正负 22.5 度发射。

startVelocity 数字（默认值：45）：五彩纸屑开始移动的速度，以像素为单位。

decay 数字（默认值：0.9）：五彩纸屑失去速度的速度。将此数字保持在 0 和 1 之间，否则五彩纸屑会加快速度。更好的是，永远不要改变它。

gravity 数字（默认值：1）：粒子被拉下的速度。1 是全重力，0.5 是半重力等，但没有限制。如果你愿意，你甚至可以让粒子上升。

drift 数字（默认值：0）：五彩纸屑会飘到一边。默认值为 0，这意味着它们将直接下降。对左使用负数，对右使用正数。

ticks Number (default: 200) : 五彩纸屑会移动多少次。这是抽象的......但如果五彩纸屑对你来说消失得太快，请尝试一下。

origin 对象：从哪里开始发射五彩纸屑。如果您愿意，请随意在屏幕外启动。

origin.x Number（默认值：0.5）：x页面上的位置，0左边缘和1右边缘。

origin.y Number (default: 0.5) :y页面上的位置，0上边缘和1下边缘。

colors Array<String>：颜色字符串数组，采用 HEX 格式...你知道，比如#bada55.

shapes Array<String>：五彩纸屑的形状数组。可能的值为square和circle。默认设置是均匀混合使用这两种形状。您甚至可以通过提供一个值来更改组合，例如['circle', 'circle', 'square']使用两个三分之一的圆圈和三分之一的正方形。

scalar 数字（默认值：1）：每个五彩纸屑颗粒的比例因子。使用小数使五彩纸屑变小。继续，试试小小的五彩纸屑，它们很可爱！

zIndex 整数（默认值：100）：毕竟五彩纸屑应该在上面。但是如果你有一个疯狂的高页面，你可以将它设置得更高。

disableForReducedMotion 布尔值（默认值：false）：为喜欢减少运动的用户完全禁用五彩纸屑。在这种情况下，confetti()承诺将立即解决。

confetti.create(canvas, [globalOptions])→function

此方法创建confetti使用自定义画布的函数实例。如果您想限制页面上出现五彩纸屑的区域，这很有用。默认情况下，此方法不会以任何方式修改画布（除了绘制它）。

画布可能会被误解，所以让我解释一下为什么你可能想让模块稍微修改一下画布。默认情况下，acanvas是一个相对较小的图像——大约 300x150，具体取决于浏览器。当您使用 CSS 调整它的大小时，这会设置画布的显示大小，但不会设置该画布上显示的图像。可以将其想象为在标签中加载 300x150 jpeg 图像，img然后将该标签的 CSS 设置为1500x600-- 您的图像最终会被拉伸和模糊。在画布的情况下，您还需要设置画布图像本身的宽度和高度。如果你不想这样做，你可以允许confetti为你设置它。

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>

confetti.js是一款canvas彩色纸屑喷射粒子插件。

网友评论0

pixi.min.js

jquery.gif.js

gif.js

jquery.fliptimer.js

gifshot.js

libgif.js

particleground.js

pts.js

bubbly-bg.js

PixelWave.js