微信小程序canvas实现刮刮乐效果


Posted in Javascript onJuly 09, 2018

本文实例为大家分享了微信小程序实现刮刮乐效果的具体代码,供大家参考,具体内容如下

效果图

微信小程序canvas实现刮刮乐效果

设计流程

微信小程序canvas实现刮刮乐效果

设计思路

  1. canvas设置背景图,作为中奖图片;
  2. 在canvas上绘制刮的灰色涂层;
  3. 通过绑定的事件,清除对应区域的涂层;
  4. 最后判断涂层清除区域是否超过设置的可见百分比,如果超过则全部涂层清除,否则不清楚。

1、全局常量

获取用户传入的canvas的ID,设置的canvas的宽高,canvas涂层的颜色,清除当前坐标的半径和直径,计算当前清除的面积,全部清除百分比,canvas的面积。

constructor(page,opts){
 opts = opts || {};
 this.page = page;
 this.canvasId = opts.canvasId || 'luck';
 this.width = opts.width || 300;
 this.height = opts.height || 150;
 this.maskColor = opts.maskColor || '#dddddd';
 this.size = opts.size || 8;
 this.r = this.size * 2;
 this.area = this.r * this.r; 
 this.scale = opts.scale || 0.75;
 this.totalArea = this.width * this.height;

 this.init();
}

2、初始化全局变量

1、变量:判断清除全部涂层的布尔值,记录清除坐标的数组。
2、API:调用创建canvas绘图上下文API。
3、方法:调用涂层绘制函数,调用事件绑定函数。

init(){
 this.show = false;
 this.clearPoints = [];
 this.ctx = wx.createCanvasContext(this.canvasId, this);
 this.drawMask();
 this.bindTouch();
}

3、涂层绘制函数的实现

drawMask(){
 this.ctx.setFillStyle(this.maskColor);
 this.ctx.fillRect(0, 0, this.width, this.height);
 this.ctx.draw();
}

4、事件绑定函数的实现

1 、touchstart事件只是清除当前位置的坐标点半径的涂层。
2 、touchmove事件清除移动过程个坐标点半径内的涂层。
3 、touchend事件判断当前次清除是否超过总面积的75%,超过则全部清除,否则不做处理。

bindTouch(){
 const _this = this;
 _this.page.onTouchStart = function(e){
  _this.eraser(e,true);
 }
 _this.page.onTouchMove = function (e) {
  _this.eraser(e);
 }
 _this.page.onTouchEnd = function (e) {
  if(_this.show){
   _this.ctx.clearRect(0, 0, _this.width, _this.height);
   _this.ctx.draw();
  }
 }
}

5、eraser橡皮擦函数的实现

1、获取记录清除坐标点数组的长度,当前位置的x,y坐标,计算清除块的起点,声明计数变量。
2、判断是否是第一次进入,是则直接记录该坐标。
3、判断当前点在记录数组中是否存在,如果存在,直接返回,如果不存在,在记录入数组。
4、是否满足清除全部涂层,满足show赋值为true,不满足,直接清除当前坐标涂层。

eraser(e,bool){
  let len = this.clearPoints.length;
  let count = 0
  let x = e.touches[0].x, y = e.touches[0].y;
  let x1 = x - this.size;
  let y1 = y - this.size;
  if(bool){
   this.clearPoints.push({
    x1: x1,
    y1: y1,
    x2: x1 + this.r,
    y2: y1 + this.r
   })
  }
  for (let val of this.clearPoints){
   if(val.x1 > x || val.y1 > y || val.x2 < x || val.y2 < y){
    count++;
   }else{
    break;
   }
  }
  if(len === count){
   this.clearPoints.push({
    x1: x1,
    y1: y1,
    x2: x1 + this.r,
    y2: y1 + this.r
   })
  }
  if (this.clearPoints.length && this.r * this.r * this.clearPoints.length > this.scale * this.totalArea){
   this.show = true;
  }
  this.ctx.clearRect(x1, y1, this.r, this.r);
  this.ctx.draw(true);
 }

提供的其他实现思路

方法一:本文提供的方法是将中奖图片作为背景设置给canvas,然后清除canvas涂层来实现刮刮乐效果。
方法二:canvas绘制涂层,然后取图片在canvas相同坐标的像素,最后将该处图片像素绘制到canvas。
方法三:类似方法一,只是将背景直接用图片img.定位在canvas的下边。

总结

最重要的是判断清除涂层在总canvas面积的占有率记录,只要判断该坐标不在清除的范围,就可以记录该坐标。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
VUE安装使用教程详解
Jun 03 Javascript
浅谈JavaScript 声明提升
Sep 14 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 #Javascript
js中Object.defineProperty()方法的不详解
Jul 09 #Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 #Javascript
微信小程序实现倒计时补零功能
Jul 09 #Javascript
Angular6中使用Swiper的方法示例
Jul 09 #Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 #Javascript
微信小程序实现漂亮的弹窗效果
May 26 #Javascript
You might like
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
php图片添加水印例子
2016/07/20 PHP
Prototype Class对象学习
2009/07/19 Javascript
javascript动态加载三
2012/08/22 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
python实用代码片段收集贴
2015/06/03 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
详细分析Python collections工具库
2020/07/16 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
经典的班主任推荐信
2013/10/28 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
节约用水标语
2014/06/11 职场文书
社团活动总结书
2014/06/27 职场文书
师德师风自我评价范文
2014/09/11 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
城管年度个人总结
2015/02/28 职场文书
李强优秀员工观后感
2015/06/16 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
python 爬取天气网卫星图片
2021/06/07 Python