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

2024-01-25 10:28
文章标签 uniapp 自定义 图片 解决 canvas 刮乐 蒙层

本文主要是介绍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>

这篇关于uniapp canvas做的刮刮乐解决蒙层能自定义图片的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/642984。

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
如何解决线上平台抽佣高 线下门店客流少的痛点！

如何解决线上平台抽佣高 线下门店客流少的痛点！

目前，许多传统零售店铺正遭遇客源下降的难题。尽管广告推广能带来一定的客流，但其费用昂贵。鉴于此，众多零售商纷纷选择加入像美团、饿了么和抖音这样的大型在线平台，但这些平台的高佣金率导致了利润的大幅缩水。在这样的市场环境下，商家之间的合作网络逐渐成为一种有效的解决方案，通过资源和客户基础的共享，实现共同的利益增长。 以最近在上海兴起的一个跨行业合作平台为例，该平台融合了环保消费积分系统，在短
阅读更多...
自定义类型：结构体(续)

自定义类型：结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐？ 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识，并举出了两个例子，我们再举出两个例子继续说明： struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s
阅读更多...
pip-tools：打造可重复、可控的 Python 开发环境，解决依赖关系，让代码更稳定

pip-tools：打造可重复、可控的 Python 开发环境，解决依赖关系，让代码更稳定

在 Python 开发中，管理依赖关系是一项繁琐且容易出错的任务。手动更新依赖版本、处理冲突、确保一致性等等，都可能让开发者感到头疼。而 pip-tools 为开发者提供了一套稳定可靠的解决方案。 什么是 pip-tools？ pip-tools 是一组命令行工具，旨在简化 Python 依赖关系的管理，确保项目环境的稳定性和可重复性。它主要包含两个核心工具：pip-compile 和 pip
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...
Spring MVC 图片上传

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-
阅读更多...
速盾高防cdn是怎么解决网站攻击的？

速盾高防cdn是怎么解决网站攻击的？

速盾高防CDN是一种基于云计算技术的网络安全解决方案，可以有效地保护网站免受各种网络攻击的威胁。它通过在全球多个节点部署服务器，将网站内容缓存到这些服务器上，并通过智能路由技术将用户的请求引导到最近的服务器上，以提供更快的访问速度和更好的网络性能。 速盾高防CDN主要采用以下几种方式来解决网站攻击： 分布式拒绝服务攻击(DDoS)防护：DDoS攻击是一种常见的网络攻击手段，攻击者通过向目标网
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2