网页点击加上五彩纸屑效果,canvas-confetti.js快速实现丝带飘飞

canvas-confetti.js可以快速给网页加上五彩纸屑点击效果。

代码示例 demo，快速集成：

  // 从CDN引入js https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js

  // 执行代码，弹出特效
  confetti({
    particleCount: 200,
    spread: 70,
    origin: {
      y: 0.6
    }
  });

  // 实现点击页面的时候，加特效
  document.addEventListener('click', function (e) {
    confetti({
      particleCount: 200,
      spread: 70,
      origin: {
        x: (e.clientX + 0) / innerWidth,
        y: (e.clientY + 10) / innerHeight
      }
    })
  })

在这个网页上，点击试试效果吧！ canvas-confetti.js的效果还是很不错的

上面的代码，引入了开源库，监听了用户点击网页的事件，然后在鼠标的click点击位置上，弹出五彩纸屑飞舞的特效动画。

复制以上的代码，加到自己的项目中，网页的特效就做好了！

• 加上canvas-confetti.js 五彩纸屑的飞舞就有了
• canvas-confetti.js可以快速给web网页加上礼花、礼炮的效果、狂欢节飞行飘带
• 节日庆祝 撒花特效 canvas-confetti.js demo
• canvas-confetti.js demo 示例 测试 效果测试
• canvas-confetti.js 怎么快速集成
• canvas-confetti.js 入门教程 example示例
• 怎么在网页加上点击特效，点击后有五彩纸屑、很多丝带飘飞、礼花烟花特效
• 网页点击特效的js开源库
• vue 网页怎么加上点击特效
• 除了五彩纸屑，canvas-confetti 还能实现雪花飞舞、星星飞舞、加农炮、Fireworks等各种特效动画
• canvas-confetti quick demo
• github开源库: https://github.com/catdad/canvas-confetti

如果你遇到报错 Uncaught ReferenceError: module is not defined at confetti.min.js:1:10243

要解决错误，最好使用这个js: https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js

或者这个：https://unpkg.com/canvas-confetti@1.9.3/dist/confetti.browser.js

是能解决问题的！如果不用的话，最好就用 npm 安装的方式使用 canvas-confetti js 库了，使用 node.js npm 包安装，使用 webpack、vite 打包后，应该能解决报错。

使用以下cdn 的 js 都是会报错 module is not defined：

https://cdn.staticfile.net/canvas-confetti/1.9.2/confetti.min.js

https://cdnjs.cloudflare.com/ajax/libs/canvas-confetti/1.9.3/confetti.min.js

这些cdn上，没有 confetti.browser.min.js 这个文件，其他的文件无法直接兼容浏览器环境。