刮刮乐微信html5源码,微信小程序canvas实现刮刮乐效果
微信小程序canvas实现刮刮乐效果
来源:中文源码网 浏览: 次 日期:2018年9月2日
【下载文档: 微信小程序canvas实现刮刮乐效果.txt 】
(友情提示:右键点上行txt文档名->目标另存为)
微信小程序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面积的占有率记录,只要判断该坐标不在清除的范围,就可以记录该坐标。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持中文源码网。
亲,试试微信扫码分享本页! *^_^*
刮刮乐微信html5源码,微信小程序canvas实现刮刮乐效果相关推荐
- 智慧新零售收银系统包含pc源码安卓小程序进销存等等功能
智慧新零售收银系统包含pc源码安卓小程序进销存等等功能这里写自定义目录标题 欢迎使用智慧新零售收银系统 欢迎使用智慧新零售收银系统 零售开发语言有:php.HTML5.Java 安卓端收银.助手:原生 ...
- 省钱兄同城跑腿小程序源码uniapp前端模版源码(小程序+APP+H5)
开源省钱兄同城跑腿源码,目前只开源用户端V2版本部分核心模块源码提供学习研究 使用uniapp技术,提供学习使用不可商业 适配支持公众号+APP+H5+小程序,使用Hbuilder导入即可运行 #功能 ...
- 【附源码】小程序初窥之简单查单词
新年假期百无聊赖,于是就看了一下微信小程序的开发方法,花了两天时间入了个门,这里记录一下. 阅读之前,先确定你知道基本的 html+css+js 语法,这样就能更好地和我一样,以一个新手的视角来理解小 ...
- 大商创小程序源码_小程序直播系统有哪些基本功能
小程序直播系统源码能够构建出高品质的直播平台,现如今较为流行的"直播间+电商.""直播间+教育"等新型的"直播间+"等多元化的直播间方向都不 ...
- H5盲盒商城网站源码开发小程序抽奖系统商城搭建 VUE+PHP后台项目
这是H5盲盒商城网站源码开发小程序抽奖系统商城搭建 VUE+PHP后台项目(代码不加密,开源) 1.带推广二维码功能 2.含充值3级分销功能 3.盲盒回收成余/额功能 等功能 可以个性化定制开发等 源 ...
- 多用户商城管理源码 商城源码 多用户小程序 APP商城源码
多用户商城管理源码 商城源码 多用户小程序 APP商城源码 开发环境:Java +springboot + vue 前端:UNIAPP 系统功能简介: 系统管理 字典管理 角色管理 菜单管理 用 ...
- 大型商城系统源码 PC+小程序+APP源码+H5 全套源代码
大型多商户B2B2C商城源码 Java商城源码 PC+小程序+APP源码+H5+商家端+总后台 开发环境:Java+springboot+Vue+Uni-app 一.平台端 功能支持: • 系统设置 ...
- Java生鲜电商平台-商品中心的架构设计与源码解析(小程序/APP)
Java生鲜电商平台-商品中心的架构设计与源码解析(小程序/APP) 说明:Java生鲜电商平台中,由于商品的架构很大程度决定了电商的扩展性与伸缩性.对此根据自己多年的生鲜电商经验,整理了以下的商品中 ...
- (附源码)小程序记账微信小程序 毕业设计180815
记账微信小程序 摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,记账微信小程序被用户普遍使用, ...
- 最新小程序源码(微信/抖音小程序源码和小程序游戏源码开发)
本文将利用小程序游戏提供的能力制作一个简单的方块旋转小程序游戏,旨在从零开始介绍小程序游戏的开发过程. 注册小程序游戏账号 进入小程序注册页面按照指引填写信息并提交相应信息,服务类别选择"程 ...
最新文章
- was unable to refresh its cache! status = Cannot execute request on any known server
- html文件传递中文参数到flex中产生的中文乱码问题
- 大数据 互联网架构阶段 电商项目简介
- 【算法】学习笔记(4):分治思想 归并排序
- c语言编程题2^0+2^1+……+2e63,牛客网刷题33(2道题)
- Java™ 教程(控制流语句)
- 伊拉克博士深陷战区要耽搁毕业论文,瑞典导师派武装雇佣兵救他全家
- Java - 经常使用函数Random函数
- vue2.0 之事件处理器
- mid制作乐谱_CuteMIDI简谱打谱软件(midi音乐制作器)V8.5.1 安装版
- linux 小度 驱动_小度 WiFi 与 Windows 和 Linux
- 中山大学计算机线性代数第六版答案,中山大学2013线性代数第二次作业
- scratch英语计算机,scratch 2怎么做计算器
- VRCORE开发者大赛圆满落幕,中国虚拟现实内容大集结
- MySQL Workbench main_menu.xml 文件 可直接粘贴(下)
- 分享一个支持离线下载的免费网盘
- 论文解读 Search to Distill: Pearls are Everywhere but not the Eyes,神经网络架构搜索+知识蒸馏
- 网络曝光华为自研操作系统“鸿蒙” (图)
- 西门子变频器中文调试软件
- 利用 sqlplus spool 实现oracle 导出 csv 文件