小程序canvas实现金币抛撒效果

wxml页面代码如下：

<!--index.wxml-->
<view class="container">
 <canvas style="width: 750rpx; height: 500rpx;border:1px;position:absolute;top:0px;left:0px; border:1px solid black;" canvas-id="circle"
  disable-scroll="true"
  bindtouchstart="bindtouchstart"
  bindtouchmove="bindtouchmove"
  bindtouchend="bindtouchend"
  bindtap="bindtap"
  bindlongpress="bindlongpress"
  ></canvas>
</view>

//index.js
//获取应用实例
const app = getApp()
var wxDraw = require("../../../../util/wxdraw.min.js").wxDraw;
var Shape = require("../../../../util/wxdraw.min.js").Shape;
var AnimationFrame = require("../../../../util/wxdraw.min.js").AnimationFrame;


Page({
  data: {
    userInfo: {},
    imgPosition: [],
    totalCoins: 6,//控制金币数量
    hasUserInfo: false,
    // wxCanvas:null


  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  bindtouchstart: function (e) {
    // 检测手指点击事件
    // console.log(e);
    this.wxCanvas.touchstartDetect(e);

  },
  bindtouchmove: function (e) {
    // 检测手指点击 之后的移动事件
    // console.log(e);        
    this.wxCanvas.touchmoveDetect(e);
  },
  bindtouchend: function () {
    //检测手指点击 移出事件
    this.wxCanvas.touchendDetect();
  },
  bindtap: function (e) {
    // console.log(e);    
    this.wxCanvas.tapDetect(e);
  },
  bindlongpress: function (e) {
    // console.log(e);
    this.wxCanvas.longpressDetect(e);
  },
  onLoad: function () {
    /** 
     * 
     */
    // console.log(requestAnimationFrame);
    var context = wx.createCanvasContext('circle')
    this.wxCanvas = new wxDraw(context, 0, 0, 400, 500);
    this.imgPosition = []
    this.imgArray = []
    this.drawCoins()
  },
  drawCoins() {//核心算法
    //初始化金币位置
    let that = this
    if (this.imgPosition.length === 0) {
      for (let i = 0; i <= this.data.totalCoins; i++) {
        let widthAndHeight = this.rand(25, 40)
        let x = Math.floor(this.wxCanvas.w / 2 - widthAndHeight / 2)
        let y = Math.floor(this.wxCanvas.h - widthAndHeight - 40)
        
        this.imgPosition.push( {
          imgSize: widthAndHeight,
          imgX: x,
          imgY: y
        })
        let img = new Shape('image', {
          x: x,
          y: y,
          w: widthAndHeight,
          h: widthAndHeight,
          file: "./coins.png"
        }, 'fill', true)
        this.wxCanvas.add(img)
        this.imgArray.push(img)
      }
    }
    this.imgArray.forEach((item, index) => {
      let v = this.rand(120, 90),
        angle = this.rand(80, 89),
        theta = (angle * Math.PI) / 180,
        g = -9.8;

      let t = 0,
        z, r, nx, ny,
        totalt = 10;
      let negate = [1, -1, 0],
        direction = negate[Math.floor(Math.random() * negate.length)];

      let randDeg = this.rand(-5, 10),
        randScale = this.rand(0.9, 1.1),
        randDeg2 = this.rand(30, 5);
      z = setInterval(function () {
        let ux = (Math.cos(theta) * v) * direction;
        let uy = (Math.sin(theta) * v) - ((-g) * t);
        
        nx = (ux * t) + that.imgPosition[index].imgX;
        ny = that.imgPosition[index].imgY - ((uy * t) + (0.25 * (g) * Math.pow(t, 2)));
        if (ny > 450) {
          ny = 450;
        }
        item.updateOption({x:nx,y:ny})
        t = t + 0.10;
        if (t > totalt) {
          clearInterval(z);
      }
      },20)

    })

    //跳出循环

  },
  rand(min, max) {
    return Math.random() * (max - min) + min
  },
  onUnload: function () {
    this.wxCanvas.clear(); //推荐这个
  }

})

参考链接：

1、小程序画布微类库：https://bobiscool.github.io/wxDrawDocs/#/api/wxDraw

2、核心算法参考：https://www.17sucai.com/preview/1/2015-07-12/%E9%87%91%E5%B8%81%E6%8A%9B%E6%B4%92/index.html