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

本文介绍: 最近给湖南中烟做元春活动，一个月要开发4个小活动，这个是其中一个难度一般，最难的事一个类似鲤鱼跃龙门的小游戏，哎，真实为难我这个“拍黄片”的。

在这里插入图片描述

最近给湖南中烟做元春活动，一个月要开发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>