小伙用微信小程序的Canvas手撸了一个娃娃机

原文：https://blog.100boot.cn/post/3067

前言

夹娃娃营销活动大家应该都不陌生那如何用小程序实现呢？
今天就带大家用canvas撸了一个全手工绘制的夹娃娃分享给大家。此处应有掌声 : )

一、效果图

二、项目结构

三、运行流程

获取所有奖品列表
依次绘制背景、爪子、展台、顶部海报
点击任意区域出发开始夹娃娃
请求后端获取得到的奖品，也可以为空（没有夹到）
展示夹到的奖品

四、关键代码

点击屏幕开始
模拟后台返回数据

// 点击屏幕开始
if (!isStart && clip) {isStart = true;var prizes = this.data.prizes;// 模拟后台返回数据wx.showLoading({title: '请求中',});setTimeout(function () {wx.hideLoading();// 随机一个奖品var rIndex = utils.getRandom(prizes.length * 2);var prize = rIndex > prizes.length - 1 ? null : prizes[rIndex];// 启动夹子clip.open(prize);}, 1000);
}

当爪子动画完成回到顶部后回调函数

// 当爪子动画完成回到顶部后回调函数
clip.onMoveUp = function () {isStart = false;// 获取夹到的物品, 可能为空var prize = clip.getPrize();// 显示夹到的物品, 可能为空if (prize) {wx.showToast({image: prize.img,title: "获得'" + prize.text + "'",duration: 3000,mask: true,})}else{wx.showToast({icon: "none",title: "哎呀! 什么也没有抓到。",duration: 3000,mask: true,})}
};

计算流逝的时间和绘制每个模块

// 更新动画
var currentTime = new Date().getTime();
// 上一次的时间
var lastTime = currentTime;
var update = function () {// 当前时间currentTime = new Date().getTime();// 计算流逝的时间var time = currentTime - lastTime;// 绘制背景context.drawImage(bgImg, 0, 0, w, h);// 绘制爪子clip.draw(context);clip.update(time);// 绘制展台booth.draw(context);booth.update(time);// 绘制顶部海报context.drawImage(headerImg, 0, 0, w, headerH);// 绘图画布context.draw();// 记录上次的时间lastTime = currentTime;
};

爪子的绘制

Clip.prototype.draw = function (context) {// 线条context.save();context.drawImage(lineImg, this.line.left, 0, this.line.w, this.line.h);context.restore();var theta = Math.PI * this.angle / 180;// left clipcontext.save();context.translate(this.lb.right, this.lb.top); // 以左边爪子的右上为圆心旋转context.rotate(theta);context.drawImage(clipLImg, -this.lb.w, 0);context.restore();// right clipcontext.save();context.translate(this.rb.left, this.rb.top); // 以右边爪子的左上为圆心旋转context.rotate(-theta);context.drawImage(clipRImg, 0, 0);context.restore();context.save();context.drawImage(screwImg, this.screw.left, this.screw.top);context.restore();// 显示被抓的娃娃if (this.showPrize && this.prize && this.prize.img) {context.save();context.drawImage(this.prize.img, this.lb.left, this.lb.y, this.prize.w, this.prize.h);context.restore();}
};

小伙用微信小程序的Canvas手撸了一个娃娃机相关推荐

微信小程序自定义canvas手写签名组件
需求如下图展示,因为小程序中有好几个地方使用签名,所以做成组件. 1.创建组件 signature.js const app = getApp(); Component({/*** 组件的属性列表*/ ...
微信小程序-基于canvas画画涂鸦
代码地址如下: http://www.demodashi.com/demo/14461.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <view style="backg ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
微信小程序利用canvas实现六边形蜘蛛图
微信小程序利用canvas实现六边形蜘蛛图发布时间:2018-01-24 14:30:29 1..wxml <canvas style="width: 200px; height: ...
微信小程序使用canvas绘制海报并保存本地相册
在做微信小程序的时候,很多都会用到生成海报分享功能,刚好最近项目有这个需求,今天就发出来记录下首先是使用canvas绘制一张海报,微信小程序的canvas有老版本和新版本我是用的是新版本代码如下 ...
微信小程序使用canvas绘图并下载
微信小程序使用canvas绘图并下载实现的功能: canvas绘制页面当前页面可下载文字自动换行实现的效果最终如下图所示: 在这里插入图片描述实现步骤: 1.页面初始化获取屏幕尺寸 onLo ...
微信小程序实现跳转到另外一个小程序的方法
微信小程序实现跳转到另外一个小程序的方法 1,首先需要在当前小程序app.json中定义:需要跳转的小程序的app-id app.josn "navigateToMiniProgramApp ...
微信小程序之wx.request:fail错误，真机预览请求无效问题解决，安卓,ios网络预览异常
微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,ios网络预览异常参考文章: (1)微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,i ...

小伙用微信小程序的Canvas手撸了一个娃娃机

前言

一、效果图

二、项目结构

三、运行流程

四、关键代码

小伙用微信小程序的Canvas手撸了一个娃娃机相关推荐

最新文章

热门文章