Skip to content

canvas粒子爆炸,根据画布点阵信息转化成粒子,再模拟一个爆炸效果

License

Notifications You must be signed in to change notification settings

Sweet-KK/particle-boom

Repository files navigation

particle-boom

NPM Version PRs Welcome

Table of Contents

Introduction

canvas粒子爆炸,根据画布点阵信息转化成粒子,再模拟一个爆炸效果。

⬆ Back to Top

Features

  • ParticleBoom.drawPic() 绘制图片到canvas
  • new ParticleBoom() 粒子化爆炸

⬆ Back to Top

Install

npm install particle-boom

⬆ Back to Top

Usage

<!-- 浏览器 -->
<script src="lib/particle-boom.iife.js"></script>
<script>
  // 传入canvas的id或dom
  new ParticleBoom('canvas', {
    // speed: Number, // 爆炸绘制的定时器间隔
    // gap: Number, // 粒子间隔
    // radius: Number, // 粒子大小
    // minVx: Number, // 最小水平喷射速度
    // maxVx: Number, // 最大水平喷射速度
    // minVy: Number, // 最小垂直喷射速度
    // maxVy: Number, // 最大垂直喷射速度
    // edgeOpacity: false, // 是否canvas边缘羽化
    onBoomEnd () {
      console.log('爆炸结束了')
    },
    filterFunc ({ r, g, b, a }) {
      // 不是透明且不是白色才需要提取
      return a !== 0 && !(r === 255 && g === 255 && b === 255)
    }
  }, key)  // key标识
</script>


<!-- npm -->
<script>
import ParticleBoom from 'particle-boom'
export default {
  methods: {
    draw () {
      return ParticleBoom.drawPic(this.$refs.canvas, imgSrc)
    },
    boom () {
      new ParticleBoom(this.$refs.canvas)
    }
  }
}
</script>

⬆ Back to Top

Demo

⬆ Back to Top

License

MIT

⬆ Back to Top

About

canvas粒子爆炸,根据画布点阵信息转化成粒子,再模拟一个爆炸效果

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published