微信小程序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 相关文章推荐
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
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生成shtml类用法实例
2014/12/09 PHP
php中使用GD库做验证码
2016/03/31 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
制作特殊字的脚本
2006/06/26 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
Underscore源码分析
2015/12/30 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
python实现矩阵乘法的方法
2015/06/28 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
Python实现按中文排序的方法示例
2018/04/25 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
请介绍一下Ant
2016/07/22 面试题
校本教研工作制度
2014/01/22 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
2015年人事科工作总结
2015/04/28 职场文书
回复函格式及范文
2015/07/14 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书