uniapp，vue的cavans飘落效果

原创

已于 2023-06-01 15:03:38 修改 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue.js #javascript

于 2021-01-25 15:34:18 首次发布

首先效果图。
飘落个数，速度，同时最多出现几个一起飘可以控制
在这里插入图片描述

代码

<canvas canvas-id="myCanvas" class="my-canvans" v-if='canvansShow'/>

// canvansShow 默认true
onShow () {
   
   
    this.createStar(this.imgUrl)
},
mothods{
   
   
	createStar (imgUrl) {
   
   
      // #ifdef MP-WEIXIN
      let starImage = ''
      uni.getImageInfo({
   
   
        src: imgUrl,
        success: res => {
   
   
          starImage = res.path
        }
      })
      // #endif
      let {
   
    requestAnimationFrame } = this
      function Star (x, y, radius) {
   
   
        this.x = x
        this.y = y
        this.sx = 0
        this.sy = 0
        this.deg = 0
        this.

最低0.47元/天解锁文章