全国咨询热线:18720358503

微信小程序样板_微信小程序canvas完成刮刮乐效果

类别:企业动态 发布时间:2021-01-08 浏览人次:

微信小程序canvas实现刮刮乐效果       这篇文章主要为大家详细介绍了微信小程序canvas实现刮刮乐效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

效果图

设计流程

设计思路

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

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面积的占有率记录,只要判断该坐标不在清除的范围,就可以记录该坐标。

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


下一篇:没有了

推荐阅读

微信小程序样板_微信小程序canvas完成刮刮乐效果

手机微信微信小程序canvas完成刮刮乐实际效果 本文关键为大伙儿详尽详细介绍了手机微信微信小程序canvas完成刮刮乐实际效果,具备一定的参照使用价值,很感兴趣的小伙子伴们...

2021-01-08
如何设计出一个用户喜欢的网站?

怎样设计方案出一个客户喜爱的网站?:大家在设计方案的情况下最后的目地便是要做到顾客令人满意的水平。可是如何才可以根据设计方案使商品达到优良的客户感受呢?很显而易见...

2021-01-08
网站形象带给用户价值最重要

某企业与顾客交易量了一笔额度数十万余元的貿易,但顾客竞然几乎沒有明确提出要到企业看一下。该顾客历经从网站在检索有关企业后,评定如今她们选中的企业整体实力是最好的,...

2021-01-08
付出宝小程序怎么做_NodeJs项目中关闭ESLint的方法

NodeJs新项目中关掉ESLint的方式 ESLint是一个用于鉴别 ECMAScript 而且依照标准得出汇报的编码检验专用工具,应用它能够防止低等不正确和统一编码的设计风格。本文关键详细介绍了...

2021-01-08
小程序的开发流程_在iFrame子页面里完成模态框的

在iFrame子网页页面里完成多形式框的方式 今日网编就为大伙儿共享一篇在iFrame子网页页面里完成多形式框的方式,具备非常好的参照使用价值,期待对大伙儿有一定的协助。一起...

2021-01-08
惠州营销网站建设-企业官网建设推广的六种基本

1. 检索模块营销推广方式 检索模块营销推广就是指运用检索模块、归类文件目录等具备线上查找信息内容作用的互联网专用工具开展网络推广的方式。因为检索模块的基本方式能够...

2021-01-08
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信