• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信小程序----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);
  }

提供的其他实现思路

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

总结

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

下载

我的博客,欢迎交流!

我的CSDN博客,欢迎交流!

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

posted @ 2018-03-06 15:22 Newman·Li 阅读(...) 评论(...) 编辑 收藏

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序与后台接口封装发布时间:2022-07-18
下一篇:
微信小程序 选择图片及放大预览发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap