微信小程序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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
js null,undefined,字符串小结
Aug 21 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 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 $_SERVER当前完整url的写法
2009/11/12 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
在Python中使用成员运算符的示例
2015/05/13 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
Python如何实现单例模式
2016/06/03 面试题
物流专业大学生求职信范文
2013/10/28 职场文书
跑出一片天观后感
2015/06/08 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
Golang 字符串的常见操作
2022/04/19 Golang