Canvas Confetti 五彩纸屑特效 JS 插件

介绍

canvas-confetti 是一个使用 canvas 的五彩纸屑特效 JS 插件。先看下效果：

使用方式

1.NPM 安装：

npm install --save canvas-confetti

然后通过 const confetti = require('canvas-confetti'); 在项目中使用。

2.从 CDN 导入 HTML 页面中（也可以将 JS 文件下载到本地，体积只有 10 KB 左右大小）：

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js" defer></script>

然后直接在 HTML 页面中调用 confetti() 方法即可立即展示特效。

控制发射原点

origin.x：Number（默认值：0.5）：发射的水平方向原点，0 表示左边缘，1 表示右边缘。
origin.y：Number (默认值: 0.5) :发射的垂直方向原点，0 表示上边缘，1 表示下边缘。

app.onclick = e => confetti({origin: {x: e.clientX / innerWidth,y: e.clientY / innerHeight}
});

这里的 e.clientX / innerWidth 表示鼠标事件的 X 坐标除以窗口的内部宽度，e.clientY / innerHeight 表示鼠标事件的 Y 坐标除以窗口的内部高度。

控制数量和扩散角度

particleCount：Number（默认值：50），要发射的五彩纸屑的数量。
spread：Number（默认值：45），五彩纸屑在垂直方向扩散的角度，45 表示五彩纸屑以垂直方向正负 22.5 度角发射。

app.onclick = e => confetti({particleCount: 200,spread: 180,origin: {x: e.clientX / innerWidth,y: e.clientY / innerHeight}
});

控制发射角度

angle：Number（默认值：90）：发射的角度，0 表示水平向右；90 表示垂直向上；180 表示水平向左；270 表示垂直向下。

function randomInRange(min, max) {return Math.random() * (max - min) + min;
}
app.onclick = e => confetti({particleCount: 200,spread: 180,angle: randomInRange(0, 360),origin: {x: e.clientX / innerWidth,y: e.clientY / innerHeight}
});

控制重力和消失的速度

gravity：Number（默认值：1），粒子下落的速度。1 是全重力，0.5 是半重力，0 表示无重力；大于 1 表示加速下落，负值表示粒子会向上升起。
ticks：Number (默认值: 200) ，值越小粒子消失得越快，值越大粒子消失得越慢。
startVelocity：Number（默认值：45），五彩纸屑开始移动的速度，以像素为单位。

app.onclick = e => confetti({particleCount: 400,spread: 180,shapes: ['circle', 'circle', 'square'],gravity: 0,startVelocity: 30,ticks: 1000,origin: {x: e.clientX / innerWidth,y: e.clientY / innerHeight}
});

控制颜色和形状

colors Array：颜色字符串数组，采用 HEX 格式（# + 3 位或 6 位十六进制数字），可以重复颜色来增加比例，例如 [‘#f00’, ‘#f00’, ‘#f00’, ‘#f00’, ‘#0f0’, ‘#00f’, ‘#ff0’] 表示红色占七分之四，绿色、蓝色、黄色各占七分之一比例。
shapes Array：五彩纸屑的形状数组，可以为 square 和 circle。默认设置是均匀混合使用这两种形状。[‘circle’, ‘circle’, ‘square’] 表示使用三分之二的圆圈和三分之一的正方形。

烟花特效

雪花特效

庆祝特效

感谢您的阅读！

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享

Canvas Confetti 五彩纸屑特效 JS 插件相关推荐

smoke.js是一款基于HTML5 Canvas的逼真烟雾特效js插件。通过该js插件，可以非常轻松的在页面中制作出各种烟雾效果。...
Smoke.js 是一个浏览器默认警告系统的JavaScript替代品,如果你想要跨浏览器与平台的标准化JavaScript警告窗口,Smoke.js就是你想要的. Smoke.js是一个轻量级且灵活 ...
SwiftUI 动画大全之五彩纸屑特效含三角形、五星、钻石与自定义图像（教程含源码）
实战需求 SwiftUI 动画大全之五彩纸屑特效含三角形.五星.钻石与自定义图像 (教程含源码) 下雨了,五彩纸屑!SAConfettiView是向您的应用程序添加有趣.多彩的五彩纸屑并让用户感到有 ...
几个用于前端canvas图片查看编辑的js插件
几个用于前端canvas图片查看编辑的js插件 1 tui.image-editor 2 Konva 3 AlloyImage 4 zwibbler 5 canvasPS 6 Photo Editor ...
svg五彩纸屑按钮js特效
下载地址svg代码实现的五彩纸屑按钮特效,点击按钮的时候有纸屑的动画. dd:
RSS文字滚动js特效js插件rss-marquee
下载地址 rss-marquee.js是一款文字水平滚动特效插件,平滑滚动动画是基于CSS3转换. dd:
html真实雾效果图,HTML5 Canvas逼真烟雾效果js插件解析
简要教程 smoke.js是一款基于HTML5 Canvas的逼真烟雾特效js插件.通过该js插件,可以非常轻松的在页面中制作出各种烟雾效果. 使用方法在页面中引入smoke.js文件. HTML结 ...
html真实雾效果图,HTML5Canvas逼真烟雾效果js插件
简要教程 smoke.js是一款基于HTML5 Canvas的逼真烟雾特效js插件.通过该js插件,可以非常轻松的在页面中制作出各种烟雾效果. 使用方法在页面中引入smoke.js文件. HTML结 ...
vue 画布插件_一个Vue.js插件，用于使用EaselJS控制HTML5画布
vue 画布插件 vue-easeljs (vue-easeljs) A Vue.js plugin to control an HTML5 canvas using EaselJS. 一个Vue.j ...
HTML转图片的JS插件-rasterizeHTML.js
在WEB前端工作中,有时需要实现对页面生成缩略图的功能.rasterizeHTML.js就可以将HTML渲染到浏览器的canvas中,直接用JS插件达到生成图片的效果.rasterizeHTML.js ...