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
