uniapp小程序刮刮乐抽奖

 使用canvas画布画出刮刮乐要被刮的图片,使用移动清除画布。

当前代码封装为刮刮乐的组件;

vue代码: 

<template><view class="page" v-if="merchantInfo.cdn_static"><image class="bg" :src="merchantInfo.cdn_static +'statistics/luckDrawImg/scratchcard/page_bg.png'" mode="aspectFill"></image><view class="content"><view class="logo"><image :src="merchantInfo.logo" mode="heightFix"></image></view><view class="title"><image :src="merchantInfo.cdn_static +'statistics/luckDrawImg/scratchcard/title.png'" mode="heightFix"></image></view><view class="notification"><view></view><text>每日刮卡抽好礼</text><view></view></view><view class="box"><image class="scrapingBg" :src="merchantInfo.cdn_static +'statistics/luckDrawImg/scratchcard/scrapingBg.png'"></image><view class="scrapingBox"><view class="scrapingBoxContent"><!-- 奖品名称 --><!-- <view>{{ prizeTitle || "" }}</view> --><!-- 奖品图片 --><image :src="merchantInfo.cdn_static + prizeUrl"></image><canvas :style="{'width':width+'px','height':height+'px'}" style="position: absolute; top: 0;" canvas-id="myCanvas" id="myCanvas" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove"></canvas></view></view></view><view class="count"><view class="tip">您今天还有<text>{{total}}</text>次抽奖机会</view></view><view class="btns"><view class="btn" @click="getRule"><image class="btnImg" :src="merchantInfo.cdn_static +'statistics/luckDrawImg/scratchcard/rule.png'"></image><view class="btnConent"><image :src="merchantInfo.cdn_static +'statistics/luckDrawImg/scratchcard/ruleIcon.png'"></image><text>查看规则</text></view></view><view class="btn" @click="getResult()"><image class="btnImg" :src="merchantInfo.cdn_static +'statistics/luckDrawImg/scratchcard/prize.png'"></image><view class="btnConent"><image :src="merchantInfo.cdn_static +'statistics/luckDrawImg/scratchcard/prizeIcon.png'"></image><text>兑换福利</text></view></view></view></view><view class="win" v-if="rule_show"><scroll-view scroll-y class="win_box .win_box_bg"><mp-html :content="luckDrawInfo.rule" /></scroll-view><text class="iconfont iconcolseIcon theme-font-white" @click="rule_show=false"></text></view><view class="win" v-if="result_show"><view class="win_box1"><image class="win_bg" :src="merchantInfo.cdn_static +'statistics/luckDrawImg/result_bg.png'" mode=""></image><view class="win_content"><view class="win_tips theme-font-white">{{currentPrize.desc}}</view><view class="win_title">{{currentPrize.title}}</view><view class="win_btn" @click="choiseAddress()">{{currentPrize.is_address==1?'选择地址':'确定'}}</view></view></view></view><view class="win" v-if="prize_show"><view class="win_tit theme-font-white">我的奖品</view><view class="win_box2"><view class="items"><view class="left i_title">奖品</view><view class="right i_title">中奖时间</view></view><scroll-view scroll-y class="list"><view class="item" v-for="(item,index) in list" :key="index"><view class="left">{{item.lottery_prize_title}}</view><view class="right" v-if="item.is_address==1&&!item.address_id"><view class="r_btn"  @click="choiseAddress1(item)">去领奖</view></view><view class="right" v-else>{{item.created_time}}</view></view></scroll-view></view><text class="iconfont iconcolseIcon theme-font-white" @click="prize_show=false"></text></view></view></template><script>import { luckDrawInfo } from '@/api/luckDraw.js';import colors from '@/mixins/color';export default {mixins: [colors],data() {return {//https://cdn.dev.scrm.juplus.cn/InQLzDLoAl2S9LyNJUXQ45gpA.pngmask: true,wtf:true,luckDrawInfo: {},rule_show:false,result_show:false,prize_show:false,total:0,currentPrize:{},list:[],id: "",prizeTitle: "",prizeUrl: "",filePath: "",ctx: null,width: 0,height: 0,disabled: false, // 是否禁止刮卡readyState: false, // 是否开始绘制endState: false, // 结束刮卡状态watermark: '刮一刮', // 水印文字watermarkColor: '#c5c5c5', // 水印文字颜色watermarkSize: 14, // 水印文字大小title: '刮一刮开奖', // 提示文字titleColor: '#888', // 提示文字颜色titleSize: 24, // 提示文字大小startX: 0, // 触摸x轴位置startY: 0, // 触摸y轴位置touchSize: 30, // 触摸画笔大小percentage: 50, // 刮开百分之多少的时候开奖}},props: {userId: {type: [Number,String]},type:{type: [Number,String]}},//渲染完了mounted() {this.id = this.userId;this.init();this.$nextTick(() => {let content = uni.createSelectorQuery().in(this).select(".scrapingBoxContent");content.boundingClientRect((data) => {this.width = data.width;this.height = data.height;this.ctx = uni.createCanvasContext('myCanvas', this);uni.getImageInfo({src: this.merchantInfo.cdn_static + 'statistics/luckDrawImg/scratchcard/scratchingBefore.png',success: (res) => {this.filePath = res.path;this.drawInit();}})}).exec()})},	methods: {drawInit(imgUrl) {this.endState = false;this.readyState = false;this.ctx.clearRect(0, 0, this.width, this.height); // 清除画布上在该矩形区域内的内容(x,y,宽,高)。// this.ctx.setFillStyle('#ddd'); // 填充颜色// this.ctx.fillRect(0, 0, this.width, this.height); // 填充区域(x,y,宽,高)/*** 绘制文字水印*/// var width = this.watermark.length * this.watermarkSize;// this.ctx.save(); // 保存当前的绘图上下文。// this.ctx.rotate(-10 * Math.PI / 180); // 以原点为中心,原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate,旋转的角度会叠加。// let x = 0;// let y = 0;// let i = 0;// while ((x <= this.width * 5 || y <= this.height * 5) && i < 300) {// 	this.ctx.setFillStyle(this.watermarkColor); // 填充颜色// 	this.ctx.setFontSize(this.watermarkSize); // 设置字体的字号// 	this.ctx.fillText(this.watermark, x, y); // 填充的文本(文字,x,y)// 	x += width + width * 1.6;// 	if (x > this.width && y <= this.height) {// 		x = -Math.random() * 100;// 		y += this.watermarkSize * 3;// 	}// 	i++;// }// this.ctx.restore(); // 恢复之前保存的绘图上下文。/*** 绘制标题*/// this.ctx.setTextAlign("center"); // 用于设置文字的对齐// this.ctx.setTextBaseline("middle"); // 用于设置文字的水平对齐// this.ctx.setFillStyle(this.titleColor); // 填充颜色// this.ctx.setFontSize(this.titleSize); // 设置字体的字号// this.ctx.fillText(this.title, this.width / 2, this.height / 2); // 填充的文本(文字,x,y)/*** 绘制图片*/ this.ctx.drawImage(this.filePath, 0, 0, this.width, this.height); this.ctx.draw(); // 将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。this.readyState = true; // 完成绘制},// 手指触摸动作开始touchstart(e) {if (this.disabled || this.endState) {return;}this.startPlay();this.startX = e.touches[0].x;this.startY = e.touches[0].y;},// 手指触摸后移动touchmove(e) {if (this.disabled || this.endState) return;if (!this.prizeTitle) return;if (!this.prizeUrl) return;this.ctx.clearRect(this.startX, this.startY, this.touchSize, this.touchSize); // 清除画布上在该矩形区域内的内容(x,y,宽,高)。this.ctx.draw(true); // false:本次绘制是否接着上一次绘制,true:保留当前画布上的内容//记录移动点位this.startX = e.touches[0].x;this.startY = e.touches[0].y;},// 手指触摸动作结束touchend(e) {if (this.disabled || this.endState) {return;}// 返回一个数组,用来描述 canvas 区域隐含的像素数据,在自定义组件下,第二个参数传入自定义组件实例 this,以操作组件内 <canvas> 组件。uni.canvasGetImageData({canvasId: 'myCanvas',x: 0,y: 0,width: this.width,height: this.height,success: (res) => {console.log(res);let pixels = res.data;let transPixels = [];for (let i = 0; i < pixels.length; i += 4) {if (pixels[i + 3] < 128) {transPixels.push(pixels[i + 3]);}}var percent = (transPixels.length / (pixels.length / 4) * 100).toFixed(2);if (percent >= this.percentage) {this.scrapingSuccess();}},fail: (e) => {console.log(e);},}, this);},// 成功,清除所有图层scrapingSuccess(e) {if (this.endState) {return;}this.endState = true;this.ctx.moveTo(0, 0); // 把路径移动到画布中的指定点,不创建线条。用 stroke() 方法来画线条。this.ctx.clearRect(0, 0, this.width, this.height); // 清除画布上在该矩形区域内的内容(x,y,宽,高)。this.ctx.stroke(); // 画出当前路径的边框。默认颜色色为黑色。this.ctx.draw(true);// 弹出奖品setTimeout(()=>{this.result_show = true;this.drawInit();this.wtf = true;this.prizeTitle = "";this.prizeUrl = "";},800)},init(){if(this.userInfo){this.getInfo()}else{setTimeout(()=>{this.init()},500)}},getInfo(){luckDrawInfo.getDetail({id:this.id}).then(res => {this.luckDrawInfo=res.datathis.total=res.data.my_can_numthis.action('lottery',this.id,0,2,this.luckDrawInfo.title,'','lottery')})},choiseAddress(){this.currentPrize.is_address==1?uni.navigateTo({url:'/pages/address/address'}):''this.result_show=false},choiseAddress1(data){this.currentPrize=datauni.navigateTo({url:'/pages/address/address'})this.prize_show=false},setAddress(id){luckDrawInfo.setAddress({address_id:id,history_id:this.currentPrize.history_id||this.currentPrize.id}).then(res => {uni.showToast({title:"地址设置成功",icon:'none'})})},getRule(){this.scrapingSuccess();setTimeout(()=>{this.rule_show = true;},800)},getResult(){// if(!this.wtf){// 	return false// }this.scrapingSuccess();luckDrawInfo.getResult({lottery_id:this.id}).then(res => {this.list=res.data.datathis.prize_show=true})},// 点击开始,请求接口抽奖startPlay(index) {if(this.luckDrawInfo.is_register==1&&!this.userInfo.type){uni.navigateTo({url:'/pages/login/login'})return false}if(this.luckDrawInfo.is_form==1&&this.luckDrawInfo.user_form_count==0){uni.navigateTo({url:'/pages/form/form?id='+this.luckDrawInfo.form_id+'&type_id=' + this.id + '&type=lottery'})return false}if(!this.wtf){return false}// 活动未开始或活动已结束let startTimeMs = new Date(this.luckDrawInfo.start_time).getTime();let endTimeMs = new Date(this.luckDrawInfo.end_time).getTime();let nowTimeMs = new Date().getTime();if (nowTimeMs < startTimeMs) {uni.showToast({icon: "none",title: "活动未开始"})return false;}if (nowTimeMs > endTimeMs) {uni.showToast({icon: "none",title: "活动已结束"})return false;}this.mask = false;this.wtf = false;luckDrawInfo.run({id:this.id}).then(res => {this.currentPrize = res.data;this.total = res.data.row_lottery_new.my_can_num;this.prizeTitle = res.data.title;this.prizeUrl = res.data.img;}).catch(err => {this.wtf = true;});}}}
</script><style scoped lang="scss">@import 'index.scss';/**/
</style>

scss代码:


.page{width: 750rpx;height: 100vh;position: relative;
}.bg{width: 750rpx;height: 100vh;
}.content{width: 750rpx;min-height: 100vh;height: 1448rpx;position: absolute;top: 0;left: 0;
}.logo{height: 60rpx;display: flex;justify-content: center;margin-top: 90rpx;image{height: 60rpx;}
}.title{height: 254rpx;display: flex;justify-content: center;margin-top: 20rpx;image{width: 640rpx;height: 254rpx;}
}.notification{width: 370rpx;height: 56rpx;display: flex;justify-content: space-between;align-items: center;margin: -60rpx auto 0 auto;view{width: 26rpx;height: 4rpx;background-color: #fff;}text{font-size: 38rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FFFFFF;}
}.box{width: 658rpx;height: 422rpx;margin: 110rpx auto 0 auto;position: relative;.scrapingBg{width: 100%;height: 100%;}.scrapingBox{width: 100%;height: 100%;position: absolute;left: 0;top: 0;box-sizing: border-box;padding: 52rpx 62rpx;.scrapingBoxContent{width: 536rpx;height: 318rpx;z-index: 2;position: relative;image{width: 100%;height: 100%;}view {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 100rpx;color: #1B9AF9;text-shadow: 0px 4px 8px rgba(149,216,255,0.5);}}}
}.count{display: flex;justify-content: center;margin-top: 44rpx;.tip{font-size: 28rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #777777;text{color: #0039AF;}} 
}.btns{display: flex;align-items: center;justify-content: space-between;margin-top: 26rpx;
}.btn{width: 376rpx;height: 166rpx;position: relative;.btnImg{width: 100%;height: 100%;}.btnConent{width: 100%;position: absolute;top: 50%;transform: translateY(-100%);display: flex;justify-content: center;align-items: center;image{width: 42rpx;height: 42rpx;margin-right: 12rpx;}text{font-size: 42rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FFFFFF;}}}.win{width: 750rpx;height: 100vh;background: rgba(0, 0, 0, 0.8);position: fixed;top: 0;left: 0;z-index: 2;display: flex;flex-direction: column;align-items: center;justify-content: center;
}.win_box{width: 662rpx;height: 60%;padding: 40rpx;box-sizing: border-box;border-radius: 24rpx;
}.win_box_bg{background: #C3E5FE;
}.bg3{background: #C3E5FE;
}.iconcolseIcon{font-size: 58rpx;margin-top: 98rpx;
}.win_box1{width: 630rpx;height: 922rpx;position: relative;
}.win_bg{width: 630rpx;height: 922rpx;
}.win_content{width: 630rpx;height: 922rpx;position: absolute;left: 0;top: 0;display: flex;flex-direction: column;align-items: center;
}.win_tips{font-size: 48rpx;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;margin-top: 290rpx;
}.win_title{font-size: 48rpx;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;color: #FE6631;margin: 170rpx 0;
}.win_btn{width: 280rpx;height: 80rpx;line-height: 80rpx;text-align: center;background: #FFE047;border-radius: 46rpx;font-size: 32rpx;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;color: #13112C;
}.win_tit{font-size: 48rpx;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;margin-bottom: 32rpx;
}.win_box2{width: 662rpx;height: 900rpx;background: #FFFFFF;border-radius: 24rpx;display: flex;flex-direction: column;
}.items{width: 662rpx;height: 108rpx;background: #C3E5FE;border-radius: 24rpx 24rpx 0rpx 0rpx;display: flex;align-items: center;flex-shrink:0
}.left,.right{width: 50%;text-align: center;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;
}.i_title{font-size: 36rpx;
}.list{height: 792rpx;padding-bottom: 20rpx;overflow: hidden;
}.item{width: 662rpx;height: 88rpx;display: flex;align-items: center;justify-content: space-around;
}.item:nth-child(2n){background-color: #F4F4F4;
}.r_btn{width: 160rpx;height: 60rpx;line-height: 60rpx;text-align: center;background: #FFC659;border-radius: 46rpx;font-family: SourceHanSansSC-Medium, SourceHanSansSC;font-weight: bold;font-size: 32rpx;margin:0 auto;
}

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/129207.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多模块项目的搭建以及Nacos服务的发现与调用

这里写目录标题 多模块项目的搭建父项目的构建子模块的创建父子模块的意义 将注册服务引入到父子模块中创建子模块用于发现服务和调用供调用的服务接口创建调用子模块 测试一些小问题 在前文中我们实现了微服务的注册参考此文&#xff1a; Spring Cloud Alibaba中Nacos的安装&a…

基于RK3568的新能源储能能量管理系统ems

新能源储能能量管理系统&#xff08;EMS&#xff09;是一种基于现代化技术的系统&#xff0c;旨在管理并优化新能源储能设备的能量使用。 该系统通过监测、调度和控制新能源储能设备来确保能源的高效利用和可持续发展。 本文将从不同的角度介绍新能源储能能量管理系统的原理、…

what?腾讯云3年轻量2核4G5M服务器566.6元哪去了?

what&#xff1f;腾讯云3年轻量2核4G5M服务器566.6元哪去了&#xff1f;腾讯云双11优惠活动3年轻量2核4G5M服务器从566.6元涨价到756元三年&#xff0c;3年轻量2核2G4M服务器从366.6元恢复到540元三年&#xff0c;大家抓紧吧&#xff0c;三年轻量已经库存已经不多了&#xff0c…

RHCSA --- 第二天

一、查看IP地址 [rootlocalhost ~] ip ad 对应四张网卡 第一张&#xff1a;环回网卡&#xff08;用于测试&#xff09; 第二张&#xff08;主要&#xff09;&#xff1a;以太网网卡&#xff08;ens160&#xff09; 2: ens160: <BROADCAST,MULTICAST,UP,LOWER_UP>…

若依分离版——配置多数据源(mysql和oracle),实现一个方法操作多个数据源

目录 一、若依平台配置 二、编写oracle数据库访问的各类文件 三. 一个方法操作多个数据源 一、若依平台配置 1、在ruoyi-admin的pom.xml添加依赖 <dependency> <groupId>com.oracle</groupId> <artifactId>ojdbc6</artifactId> <version…

ElasticSearch 批量插入漏数据

项目场景&#xff1a; 项目中需要把Mysql数据同步到ElasticSearch中 问题描述 数据传输过程中数据不时出现丢失的情况&#xff0c;偶尔会丢失一部分数据&#xff0c;本地测试也无法复现&#xff0c;后台程序也没有报错&#xff0c;一到正式环境就有问题,很崩溃 这里是批量操…

mysql基于软件包升级

注意&#xff1a;无论是什么升级都是有风险的&#xff0c;升级前都需要做一次全备份。 mysql简单备份和恢复-CSDN博客 本文章以5.7升级为8.0为案例演示。 0、准备 1、安装mysql5.7&#xff0c;5.7版本mysql安装演示mysql-linux归档版安装-CSDN博客 2、在官网下载8.0压缩包M…

MySQL中表的增删改查

目录 一、CRUD 二、新增&#xff08;Create&#xff09; &#xff08;1&#xff09;语法 &#xff08;2&#xff09;单行数据全列插入 &#xff08;3&#xff09;多行数据指定列插入 三、查询&#xff08;Retrieve&#xff09; &#xff08;1&#xff09;语法 …

SortableJS:vuedraggable实现元素拖放排序

文档&#xff1a;https://sortablejs.github.io/Sortable/github&#xff1a;https://github.com/SortableJS/SortableVue2: https://github.com/SortableJS/Vue.DraggableVue3: https://github.com/SortableJS/vue.draggable.nextnpm https://www.npmjs.com/package/vuedragga…

k8s-服务网格实战-入门Istio

istio-01.png 背景 终于进入大家都比较感兴趣的服务网格系列了&#xff0c;在前面已经讲解了&#xff1a; 如何部署应用到 kubernetes服务之间如何调用如何通过域名访问我们的服务如何使用 kubernetes 自带的配置 ConfigMap 基本上已经够我们开发一般规模的 web 应用了&#xf…

c++-二叉树进阶

文章目录 前言一、二叉搜索树1、二叉搜索树介绍2、二叉搜索树循环实现3、二叉搜索树递归实现4、二叉搜索树的性能分析5、二叉搜索树的应用6、二叉树练习题6.1 根据二叉树创建字符串6.2 二叉树的层序遍历6.3 二叉树的层序遍历 II6.4 二叉树的最近公共祖先6.5 二叉搜索树与双向链…

ElasticSearch搜索技术深入与聚合查询实战

ES分词器详解 基本概念 分词器官方称之为文本分析器&#xff0c;顾名思义&#xff0c;是对文本进行分析处理的一种手段&#xff0c;基本处理逻辑为按照预先制定的分词规则&#xff0c;把原始文档分割成若干更小粒度的词项&#xff0c;粒度大小取决于分词器规则。 分词发生时…

R语言绘图-5-条形图(修改坐标轴以及图例等)

0. 说明&#xff1a; 1. 绘制条形图&#xff1b; 2. 添加文本并调整位置&#xff1b; 3. 调整x轴刻度的字体、角度及颜色&#xff1b; 4. 在导出pdf时&#xff0c;如果没有字体&#xff0c;该怎么解决问题&#xff1b; 1. 结果&#xff1a; 2. 代码&#xff1a; library(ggp…

文本批量处理,一键转换HTML文件编码,释放您的繁琐工作!

亲爱的用户&#xff0c;您是否曾经为需要手动转换HTML文件编码而耗费大量时间和精力而感到困扰&#xff1f;现在&#xff0c;我们为您提供了一款强大的文本批量处理工具&#xff01;让您一键将HTML文件编码进行转换&#xff0c;轻松释放您的繁琐工作&#xff01; 首先&#xf…

【带货案例】从美区十月带货达人身上寻找商品爆款秘诀!

2023只剩下最后两个月&#xff0c;年底也是各大商家冲刺卖货的黄金时期&#xff01; 带货过程中的一个重要环节即【达人营销】&#xff0c;背受跨境卖家关注。 下面选取美区十月带货达人TOP3&#xff0c;分析其带货秘诀。 据超店有数达人榜单显示&#xff1a;美区十月带货达人…

Qt中正确的设置窗体的背景图片的几种方式

Qt中正确的设置窗体的背景图片的几种方式 QLabel加载图片方式之一Chapter1 Qt中正确的设置窗体的背景图片的几种方式一、利用styleSheet设置窗体的背景图片 Chapter2 Qt的主窗口背景设置方法一&#xff1a;最简单的方式是通过ui界面来设置&#xff0c;例如设置背景图片方法二 &…

leetCode 198.打家劫舍 动态规划入门:从记忆化搜索到递推

leetCode 198.打家劫舍 198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一…

LuaHttp库写的一个简单的爬虫

LuaHttp库是一个基于Lua语言的HTTP客户端库&#xff0c;可以用于爬取网站数据。与Python的Scrapy框架类似&#xff0c;LuaHttp库也可以实现网站数据的抓取&#xff0c;并且可以将抓取到的数据保存到数据库中。不过需要注意的是&#xff0c;LuaHttp库并不像Scrapy框架那样具有完…

3 数据库系统核心知识点

一、事务 先回顾一下事务的概念&#xff1a; 事务指的是满足 ACID 特性的一组操作&#xff0c;可以通过 Commit 提交一个事务&#xff0c;也可以使用 Rollback 进行回滚ACID 1. 原子性(Atomicity) 1.事务被视为不可分割的最小单元&#xff0c;事务的所有操作要么全部提交成…

pytorch dropout 置零 + 补偿性放缩

一句话概括&#xff1a;&#xff08;训练过程中&#xff09;Dropout 操作 随机置零 非置零元素进行后补偿性放缩。以保证dropout前后数据scale不变。 详细解释(来自chatgpt): 在 PyTorch 中&#xff0c;dropout 的操作不仅仅是将某些元素置零。为了确保期望输出在训练和测试…