uniapp canvas做的刮刮乐解决蒙层能自定义图片

在这里插入图片描述

最近给湖南中烟做元春活动,一个月要开发4个小活动,这个是其中一个难度一般,最难的是一个类似鲤鱼跃龙门的小游戏,哎,真实为难我这个“拍黄片”的。下面是主要代码。

			<canvas :style="{'width':width+'px','height':height+'px'}" canvas-id="myCanvas" id="myCanvas"
				@touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">
			</canvas>
<script>
	
	import {
		setShareConfig
	} from './share'
	
	
	export default {
		data() {
			return {
				rewardList:{},
				textBoxFont: '',
				textBoxBt: '',
				textBoxState: false,
				touchStartState:true,
				tishiState:false,
				
				clickState:false,
				
				activity: {},
				reward:{
					"reward_icon": "",
					"reward_img": ""
				},
				seckillContent: '',
				prizeBoxState: false,
				count: 0, // 初始值为10秒
				readState: false,
				myPrizeState: false,
				ctx: null,
				width: 0,
				height: 0,
				chance_count: 0, //剩余次数
				validTime: '', //有效时间
				disabled: true, // 是否禁止刮卡
				readyState: false, // 是否开始绘制
				endState: false, // 结束刮卡状态

				watermark: '', // 水印文字
				watermarkColor: '#c5c5c5', // 水印文字颜色
				watermarkSize: 14, // 水印文字大小

				title: '', // 提示文字
				titleColor: '#888', // 提示文字颜色
				titleSize: 24, // 提示文字大小

				startX: 0, // 触摸x轴位置
				startY: 0, // 触摸y轴位置
				touchSize: 40, // 触摸画笔大小
				percentage: 70, // 刮开百分之多少的时候开奖

			}
		},
		onShow() {
			this.$nextTick(() => {
				let content = uni.createSelectorQuery().select(".content");
				content.boundingClientRect((data) => {
					this.width = data.width;
					this.height = data.height;
					this.ctx = uni.createCanvasContext('myCanvas', this);
					setTimeout(e => {
						this.init();
					}, 20);
				}).exec()
			})

		},

		onLoad: function(options) {

			
		},
		methods: {
			


			convertSecToDHMS(seconds) {
				var days = Math.floor(seconds / (24 * 60 * 60));
				seconds %= (24 * 60 * 60);
				var hours = Math.floor(seconds / (60 * 60));
				seconds %= (60 * 60);
				var minutes = Math.floor(seconds / 60);
				var seconds = seconds % 60;
				if (this.res.is_end) {
					return {
						days: 0,
						hours: 0,
						minutes: 0,
						seconds: 0
					};
				}
				return {
					days: days,
					hours: hours,
					minutes: minutes,
					seconds: seconds
				};
			},











			readHide() {
				if (this.count == 0) {
					this.readState = false;
				}
			},

			convertSecToDHMS(seconds) {
				var days = Math.floor(seconds / (24 * 60 * 60));
				seconds %= (24 * 60 * 60);
				var hours = Math.floor(seconds / (60 * 60));
				seconds %= (60 * 60);
				var minutes = Math.floor(seconds / 60);
				var seconds = seconds % 60;
				if (this.res.activity.difference_time <= 0) {
					return {
						days: 0,
						hours: 0,
						minutes: 0,
						seconds: 0
					};
				}
				return {
					days: days,
					hours: hours,
					minutes: minutes,
					seconds: seconds
				};
			},

			init() {
				this.endState = false;
				this.readyState = false;
				this.ctx.clearRect(0, 0, this.width, this.height); // 清除画布上在该矩形区域内的内容(x,y,宽,高)。
				this.ctx.setFillStyle('rgba(255, 255, 255, 0.5)'); // 填充颜色
				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;
         //自定义蒙层图片
				this.ctx.drawImage('../../static/jhy/ycsm/guazhi.png', 0, 0, this.width, this.height);
				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.draw(); // 将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。
				this.readyState = true; // 完成绘制
			},


			// 手指触摸动作开始
			touchstart(e) {
				
				

				if (this.disabled || this.endState) {
					return;
				}
				this.startX = e.touches[0].x;
				this.startY = e.touches[0].y;
			},
			// 手指触摸后移动
			touchmove(e) {
				
				// if (this.chance_count <= 0) {
				// 	return;
				// }
				
				if (this.disabled || this.endState) {
					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.success();
						}
					},
					fail: (e) => {
						console.log(e);
					},
				}, this);
			},

			// 成功,清除所有图层
			success: function(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);
				this.prizeBoxState = true;

			},

			// 重置
			reset() {
				this.init();
			},
			
			

		}
	}
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

uniapp复选框 实现排他选项

选择了排他选项之后 复选框其他选项不可以选择 <view class"reportData" v-for"(val, index) in obj" :key"index"> <view v-if"val.type 3" ><u-checkbox-group v-model"optionValue" placement"colu…

orm-04-Spring Data JPA 入门介绍

拓展阅读 The jdbc pool for java.(java 手写 jdbc 数据库连接池实现) The simple mybatis.&#xff08;手写简易版 mybatis&#xff09; Spring Data JPA Spring Data JPA&#xff0c;作为更大的 Spring Data 家族的一部分&#xff0c;使得基于 JPA 的仓库实现变得更加容易。…

卫星影像离线瓦片如何调用?

我们曾为你分享了按区县购买卫星影像并在线调用的方法。 于是就有朋友问&#xff0c;卫星影像瓦片可以离线调用吗&#xff1f; 当然可以&#xff0c;这里就来分享一下卫星影像瓦片离线调用的方法。 卫星影像离线瓦片如何调用&#xff1f; 这里以OpenLayers、Mapbox和Cesiu…

Google 提出稀疏注意力框架Exphormer,提升图Transformer的扩展性!

引言 Graph Transformer已成为ML的重要架构&#xff0c;它将基于序列的Transformer应用于图结构数据。然而当面对大型图数据集时&#xff0c;使用Graph Transformer会存在扩展性限制。为此&#xff0c;「Google提出了一个稀疏注意力框架Exphormer&#xff0c;它使用扩展图来提…

LeetCode-2865. 美丽塔 I

题面 给你一个长度为 n 下标从 0 开始的整数数组 maxHeights 。 你的任务是在坐标轴上建 n 座塔。第 i 座塔的下标为 i &#xff0c;高度为 heights[i] 。 如果以下条件满足&#xff0c;我们称这些塔是 美丽 的&#xff1a; 1 < heights[i] < maxHeights[i] heights 是…

音频特效SDK,满足内容生产的音频处理需求

美摄科技&#xff0c;作为音频处理技术的佼佼者&#xff0c;推出的音频特效SDK&#xff0c;旨在满足企业内容生产中的音频处理需求。这款SDK内置多种常见音频处理功能&#xff0c;如音频变声、均衡器、淡入淡出、音频变调等&#xff0c;帮助企业轻松应对各种音频处理挑战。 一…

启动mitmproxy报错 ImportError: cannot import name ‘url_quote‘ from ‘werkzeug.urls‘

报错截图 ImportError: cannot import name url_quote from werkzeug.urls (d:\soft\python\python38\lib\site-packages\werkzeug\urls.py) 原因是Werkzeug版本不兼容导致 解决方法 pip install Werkzeug2.2.2

Java-NIO篇章(5)——Reactor反应器模式

前面已经讲过了Java-NIO中的三大核心组件Selector、Channel、Buffer&#xff0c;现在组件我们回了&#xff0c;但是如何实现一个超级高并发的socket网络通信程序呢&#xff1f;假设&#xff0c;我们只有一台内存为32G的Intel-i710八核的机器&#xff0c;如何实现同时2万个客户端…

【云原生】Docker的端口映射、数据卷、数据卷容器、容器互联

目录 一、端口映射&#xff08;相当于添加iptables的DANT&#xff09; 二、数据卷创建&#xff08;宿主机目录或文件挂载到容器中&#xff09; 三、数据卷容器&#xff08;多个容器通过同一个数据卷容器为基点&#xff0c;实现所有容器数据共享&#xff09; 四、容器互联&am…

Docker容器引擎(2)

目录 一.批量删除镜像&#xff0c;容器 二.Docker 网络实现原理 随机映射端口&#xff08;从32768开始&#xff09; 访问自己&#xff1a; 在10服务器上配置路由转发&#xff1a; 指定映射端口&#xff1a; 查看容器的输出和日志信息&#xff1a; 将宿主机目标|文件挂载…

司铭宇老师:员工心态培训:正确对待工作的七种心态:让你在工作中游刃有余

员工心态培训&#xff1a;正确对待工作的七种心态&#xff1a;让你在工作中游刃有余 工作&#xff0c;是我们生活的核心组成部分。它不仅关乎我们的物质生活&#xff0c;更影响着我们的精神世界。如何在工作中找到平衡&#xff0c;实现自我价值&#xff0c;成为许多人心中的困…

oracle19.22的patch已发布

2024年01月16日,oracle发布了19.22的patch 具体patch如下 Reserved for Database - Do not edit or delete (Doc ID 19202401.9) 文档ID规则如下 19(版本)+年份(202x)+(季度首月01,04,07,10).9 往期patch no信息和下载参考文档 oracle 19C Release Update patch num…

Allegro因为精度问题导致走线未连接上的解决办法

Allegro因为精度问题导致走线未连接上的解决办法。还有在用Allegro进行PCB设计时,因为不小心操作移动了芯片,导致导线和引脚未连接上,也可以使用这个方法。 选择菜单Tools→Derive Connectivity(获取连接) 跳出下面的对话框, Convert Line to Connect Lines

SQL注入实战:宽字节注入

一、宽字节概率 1、单字节字符集:所有的字符都使用一个字节来表示&#xff0c;比如 ASCII编码(0-127) 2、多字节字符集:在多字节字符集中&#xff0c;一部分字符用多个字节来表示&#xff0c;另一部分字符(可能没有)用 单个字节来表示。 3、宽字节注入是利用mysql的一个特性…

人工智能在教学领域中有哪些运用?

人工智能在教学领域中可以有以下几种运用&#xff1a; 1. 智能辅助教学&#xff1a;利用人工智能技术开发出智能辅助教学系统&#xff0c;根据学生的学习状态和知识背景&#xff0c;提供个性化的学习路径和推荐的学习资源&#xff0c;帮助学生更好地掌握知识。 2. 自适应评估…

如何使用宝塔面板配置Nginx反向代理WebSocket(wss)

本章教程&#xff0c;主要介绍一下在宝塔面板中如何配置websocket wss的具体过程。 目录 一、添加站点 二、申请证书 三、配置代理 1、增加配置内容 2、代理配置内容 三、注意事项 一、添加站点 二、申请证书 三、配置代理 1、增加配置内容 map $http_upgrade $connection_…

Biotin-PEG4-TSA,生物素-PEG4-酪胺,用于标记蛋白质、核酸等生物分子

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;Biotin-PEG4-Tyramide&#xff0c;Biotin-PEG4-TSA&#xff0c;生物素-PEG4-酪胺&#xff0c;Biotin PEG4 Tyramide&#xff0c;Biotin PEG4 TSA 一、基本信息 产品简介&#xff1a;Biotin PEG4 Tyramide is compos…

【力扣每日一题】力扣2859计算k位置下标对应元素的和(bitCount源码分析及实现)

题目来源 力扣2859计算k位置下标对应元素的和 题目概述 给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。 请你用整数形式返回 nums 中的特定元素之 和 &#xff0c;这些特定元素满足&#xff1a;其对应下标的二进制表示中恰存在 k 个置位。 整数的二进制表示中的 1…

老子云-三维模型优化

轻量化服务 减面模式 适用于家装、游戏、电商产品等需要保留部件且精细结构多的模型 保留原始模型网格对象、UV和动画&#xff0c;仅使模型网格更轻量&#xff0c;新增GPU减面模式(限时体验)&#xff0c;省时更精细 合并模式 不保留原始模型网格和动画&#xff0c;适用于数…

【linux】远程桌面连接到Debian

远程桌面连接到Debian系统&#xff0c;可以使用以下几种工具&#xff1a; 1. VNC (Virtual Network Computing) VNC&#xff08;Virtual Network Computing&#xff09;是一种流行的远程桌面解决方案&#xff0c;它使用RFB&#xff08;Remote Framebuffer Protocol&#xff0…