微信小程序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 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
代码解析React中setState同步和异步问题
Jun 03 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
人大复印资料处理程序_补充篇
2006/10/09 PHP
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
JS复制到剪贴板示例代码
2013/10/30 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
JS跨域问题详解
2014/11/25 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
深入理解Python装饰器
2016/07/27 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
python实现websocket的客户端压力测试
2019/06/25 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python with语句和过程抽取思想
2019/12/23 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
一篇文章学会Vue中间件管道
2021/06/20 Vue.js