• uniapp小程序刮刮乐抽奖

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

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

    vue代码： 

    2.  
    3. <script>
    4. 	import { luckDrawInfo } from '@/api/luckDraw.js';
    5. 	import colors from '@/mixins/color';
    6. 	export default {
    7. 		mixins: [colors],
    8. 		data() {
    9. 			return {//https://cdn.dev.scrm.juplus.cn/InQLzDLoAl2S9LyNJUXQ45gpA.png
    10. 				mask: true,
    11. 				wtf:true,
    12. 				luckDrawInfo: {},
    13. 				rule_show:false,
    14. 				result_show:false,
    15. 				prize_show:false,
    16. 				total:0,
    17. 				currentPrize:{},
    18. 				list:[],
    19. 				id: "",
    20. 				prizeTitle: "",
    21. 				filePath: "",
    22. 				ctx: null,
    23. 				width: 0,
    24. 				height: 0,
    25. 				disabled: false, // 是否禁止刮卡
    26. 				readyState: false, // 是否开始绘制
    27. 				endState: false, // 结束刮卡状态
    28. 				watermark: '刮一刮', // 水印文字
    29. 				watermarkColor: '#c5c5c5', // 水印文字颜色
    30. 				watermarkSize: 14, // 水印文字大小
    31. 				title: '刮一刮开奖', // 提示文字
    32. 				titleColor: '#888', // 提示文字颜色
    33. 				titleSize: 24, // 提示文字大小
    34. 				startX: 0, // 触摸x轴位置
    35. 				startY: 0, // 触摸y轴位置
    36. 				touchSize: 30, // 触摸画笔大小
    37. 				percentage: 50, // 刮开百分之多少的时候开奖
    38. 			}
    39. 		},
    40. 		props: {
    41. 			userId: {
    42. 				type: [Number,String]
    43. 			},
    44. 			type:{
    45. 				type: [Number,String]
    46. 			}
    47. 		},
    48. 		//渲染完了
    49. 		mounted() {
    50. 			this.id = this.userId;
    51. 			this.init();
    52. 		},	
    53. 		methods: {
    54. 			drawInit(imgUrl) {
    55. 				this.endState = false;
    56. 				this.readyState = false;
    57. 				this.ctx.clearRect(0, 0, this.width, this.height); // 清除画布上在该矩形区域内的内容(x,y,宽，高)。
    58. 				// this.ctx.setFillStyle('#ddd'); // 填充颜色
    59. 				// this.ctx.fillRect(0, 0, this.width, this.height); // 填充区域（x,y,宽,高）
    60. 				/**
    61. 				 * 绘制文字水印
    62. 				 */
    63. 				// var width = this.watermark.length * this.watermarkSize;
    64. 				// this.ctx.save(); // 保存当前的绘图上下文。
    65. 				// this.ctx.rotate(-10 * Math.PI / 180); // 以原点为中心，原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。
    66. 				// let x = 0;
    67. 				// let y = 0;
    68. 				// let i = 0;
    69. 				// while ((x <= this.width * 5 || y <= this.height * 5) && i < 300) {
    70. 				// 	this.ctx.setFillStyle(this.watermarkColor); // 填充颜色
    71. 				// 	this.ctx.setFontSize(this.watermarkSize); // 设置字体的字号
    72. 				// 	this.ctx.fillText(this.watermark, x, y); // 填充的文本（文字，x，y）
    73. 				// 	x += width + width * 1.6;
    74. 				// 	if (x > this.width && y <= this.height) {
    75. 				// 		x = -Math.random() * 100;
    76. 				// 		y += this.watermarkSize * 3;
    77. 				// 	}
    78. 				// 	i++;
    79. 				// }
    80. 				// this.ctx.restore(); // 恢复之前保存的绘图上下文。
    81. 				/**
    82. 				 * 绘制标题
    83. 				 */
    84. 				// this.ctx.setTextAlign("center"); // 用于设置文字的对齐
    85. 				// this.ctx.setTextBaseline("middle"); // 用于设置文字的水平对齐
    86. 				// this.ctx.setFillStyle(this.titleColor); // 填充颜色
    87. 				// this.ctx.setFontSize(this.titleSize); // 设置字体的字号
    88. 				// this.ctx.fillText(this.title, this.width / 2, this.height / 2); // 填充的文本（文字，x，y）
    89. 				
    90. 				/**
    91. 				 * 绘制图片
    92. 				 */ 
    93. 				this.ctx.drawImage(this.filePath, 0, 0, this.width, this.height); 
    94.  
    95. 				this.ctx.draw(); // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
    96. 				this.readyState = true; // 完成绘制
    97. 			},
    98. 			// 手指触摸动作开始
    99. 			touchstart(e) {
    100. 				if (this.disabled || this.endState) {
    101. 					return;
    102. 				}
    103. 				this.startPlay();
    104. 				this.startX = e.touches[0].x;
    105. 				this.startY = e.touches[0].y;
    106. 			},
    107. 			// 手指触摸后移动
    108. 			touchmove(e) {
    109. 				if (this.disabled || this.endState) return;
    110. 				if (!this.prizeTitle) return;
    111. 				this.ctx.clearRect(this.startX, this.startY, this.touchSize, this.touchSize); // 清除画布上在该矩形区域内的内容(x,y,宽，高)。
    112. 				this.ctx.draw(true); // false:本次绘制是否接着上一次绘制，true:保留当前画布上的内容
    113. 				//记录移动点位
    114. 				this.startX = e.touches[0].x;
    115. 				this.startY = e.touches[0].y;
    116. 			},
    117. 			// 手指触摸动作结束
    118. 			touchend(e) {
    119. 				if (this.disabled || this.endState) {
    120. 					return;
    121. 				}
    122. 				// 返回一个数组，用来描述 canvas 区域隐含的像素数据，在自定义组件下，第二个参数传入自定义组件实例 this，以操作组件内  组件。
    123. 				uni.canvasGetImageData({
    124. 					canvasId: 'myCanvas',
    125. 					x: 0,
    126. 					y: 0,
    127. 					width: this.width,
    128. 					height: this.height,
    129. 					success: (res) => {
    130. 						console.log(res);
    131. 						let pixels = res.data;
    132. 						let transPixels = [];
    133. 						for (let i = 0; i < pixels.length; i += 4) {
    134. 							if (pixels[i + 3] < 128) {
    135. 								transPixels.push(pixels[i + 3]);
    136. 							}
    137. 						}
    138. 						var percent = (transPixels.length / (pixels.length / 4) * 100).toFixed(2);
    139. 						if (percent >= this.percentage) {
    140. 							this.scrapingSuccess();
    141. 						}
    142. 					},
    143. 					fail: (e) => {
    144. 						console.log(e);
    145. 					},
    146. 				}, this);
    147. 			},
    148. 			// 成功，清除所有图层
    149. 			scrapingSuccess(e) {
    150. 				if (this.endState) {
    151. 					return;
    152. 				}
    153. 				this.endState = true;
    154. 				this.ctx.moveTo(0, 0); // 把路径移动到画布中的指定点，不创建线条。用 stroke() 方法来画线条。
    155. 				this.ctx.clearRect(0, 0, this.width, this.height); // 清除画布上在该矩形区域内的内容(x,y,宽，高)。
    156. 				this.ctx.stroke(); // 画出当前路径的边框。默认颜色色为黑色。
    157. 				this.ctx.draw(true);
    158. 				// 弹出奖品
    159. 				setTimeout(()=>{
    160. 					this.result_show = true;
    161. 					this.drawInit();
    162. 					this.wtf = true;
    163. 					this.prizeTitle = "";
    164. 				},800)
    165. 			},
    166. 			init(){
    167. 				if(this.userInfo){
    168. 					this.getInfo()
    169. 				}else{
    170. 					setTimeout(()=>{
    171. 						this.init()
    172. 					},500)
    173. 				}
    174. 			},
    175. 			getInfo(){
    176. 				luckDrawInfo.getDetail({id:this.id}).then(res => {
    177. 					this.luckDrawInfo=res.data
    178. 					this.total=res.data.my_can_num
    179. 					this.action('lottery',this.id,0,2,this.luckDrawInfo.title,'','lottery')
    180. 					let content = uni.createSelectorQuery().in(this).select(".scrapingBoxContent");
    181. 					content.boundingClientRect((data) => {
    182. 						this.width = data.width;
    183. 						this.height = data.height;
    184. 						this.ctx = uni.createCanvasContext('myCanvas', this);
    185. 						uni.getImageInfo({
    186. 							src: this.merchantInfo.cdn_static + 'statistics/luckDrawImg/scratchcard/scratchingBefore.png',
    187. 							success: (res) => {
    188. 								this.filePath = res.path;
    189. 								this.drawInit();
    190. 							}
    191. 						})
    192. 					}).exec()
    193. 				})
    194. 			},
    195. 			choiseAddress(){
    196. 				this.currentPrize.is_address==1?uni.navigateTo({
    197. 						url:'/pages/address/address'
    198. 					}):''
    199. 				this.result_show=false
    200. 			},
    201. 			choiseAddress1(data){
    202. 				this.currentPrize=data
    203. 				uni.navigateTo({
    204. 					url:'/pages/address/address'
    205. 				})
    206. 				this.prize_show=false
    207. 			},
    208. 			setAddress(id){
    209. 				luckDrawInfo.setAddress({address_id:id,history_id:this.currentPrize.history_id||this.currentPrize.id}).then(res => {
    210. 					uni.showToast({
    211. 						title:"地址设置成功",
    212. 						icon:'none'
    213. 					})
    214. 				})
    215. 			},
    216. 			getRule(){
    217. 				if (this.prizeTitle) {
    218. 					this.scrapingSuccess();
    219. 					setTimeout(()=>{
    220. 						this.rule_show = true;
    221. 					},800)
    222. 				} else {
    223. 					this.rule_show = true;
    224. 				}
    225. 			},
    226. 			getResult(){
    227. 				// if(!this.wtf){
    228. 				// 	return false
    229. 				// }
    230. 				if (this.prizeTitle) {
    231. 					this.scrapingSuccess();
    232. 				} else {
    233. 					luckDrawInfo.getResult({lottery_id:this.id}).then(res => {
    234. 						this.list=res.data.data
    235. 						this.prize_show=true
    236. 					});
    237. 				}
    238. 			},
    239. 			// 点击开始,请求接口抽奖
    240. 			startPlay(index) {
    241. 				if(this.luckDrawInfo.is_register==1&&!this.userInfo.type){
    242. 					uni.navigateTo({
    243. 						url:'/pages/login/login'
    244. 					})
    245. 					return false
    246. 				}
    247. 				if(this.luckDrawInfo.is_form==1&&this.luckDrawInfo.user_form_count==0){
    248. 					uni.navigateTo({
    249. 						url:'/pages/form/form?id='+this.luckDrawInfo.form_id+'&type_id=' + this.id + '&type=lottery'
    250. 					})
    251. 					return false
    252. 				}
    253. 				if(!this.wtf){
    254. 					return false
    255. 				}
    256. 				
    257. 				// 活动未开始或活动已结束
    258. 				let startTimeMs = new Date(this.luckDrawInfo.start_time).getTime();
    259. 				let endTimeMs = new Date(this.luckDrawInfo.end_time).getTime();
    260. 				let nowTimeMs = new Date().getTime();
    261. 				if (nowTimeMs < startTimeMs) {
    262. 					uni.showToast({
    263. 						icon: "none",
    264. 						title: "活动未开始"
    265. 					})
    266. 					return false;
    267. 				}
    268. 				if (nowTimeMs > endTimeMs) {
    269. 					uni.showToast({
    270. 						icon: "none",
    271. 						title: "活动已结束"
    272. 					})
    273. 					return false;
    274. 				}
    275. 				
    276. 				this.mask = false;
    277. 				this.wtf = false;
    278. 				luckDrawInfo.run({id:this.id}).then(res => {
    279. 					this.currentPrize = res.data;
    280. 					this.total = res.data.row_lottery_new.my_can_num;
    281. 					this.prizeTitle = res.data.title;
    282. 				}).catch(err => {
    283. 					this.wtf = true;
    284. 				});
    285. 			}
    286. 		}
    287. 	}
    288. script>
    289.  
    290. <style scoped lang="scss">
    291. 	@import 'index.scss';
    292. 	/**/
    293. style>

    scss代码：

    1.  
    2. .page{
    3. 	width: 750rpx;
    4. 	min-height: 100vh;
    5. 	height: 1448rpx;
    6. 	position: relative;
    7. }
    8.  
    9. .bg{
    10. 	width: 750rpx;
    11. 	min-height: 100vh;
    12. 	height: 1448rpx;
    13. }
    14.  
    15. .content{
    16. 	width: 750rpx;
    17. 	min-height: 100vh;
    18. 	height: 1448rpx;
    19. 	position: absolute;
    20. 	top: 0;
    21. 	left: 0;
    22. }
    23.  
    24.  
    25. .logo{
    26. 	height: 60rpx;
    27. 	display: flex;
    28. 	justify-content: center;
    29. 	margin-top: 90rpx;
    30. 	
    31. 	image{
    32. 		height: 60rpx;
    33. 	}
    34. }
    35.  
    36. .title{
    37. 	height: 254rpx;
    38. 	display: flex;
    39. 	justify-content: center;
    40. 	margin-top: 20rpx;
    41. 	
    42. 	image{
    43. 		width: 640rpx;
    44. 		height: 254rpx;
    45. 	}
    46. }
    47.  
    48. .notification{
    49. 	width: 370rpx;
    50. 	height: 56rpx;
    51. 	display: flex;
    52. 	justify-content: space-between;
    53. 	align-items: center;
    54. 	margin: -60rpx auto 0 auto;
    55. 		
    56. 	view{
    57. 		width: 26rpx;
    58. 		height: 4rpx;
    59. 		background-color: #fff;
    60. 	}
    61. 	text{
    62. 		font-size: 38rpx;
    63. 		font-family: PingFangSC-Medium, PingFang SC;
    64. 		font-weight: 500;
    65. 		color: #FFFFFF;
    66. 	}
    67. }
    68.  
    69.  
    70. .box{
    71. 	width: 658rpx;
    72. 	height: 422rpx;
    73. 	margin: 110rpx auto 0 auto;
    74. 	position: relative;
    75. 	
    76. 	.scrapingBg{
    77. 		width: 100%;
    78. 		height: 100%;
    79. 	}
    80. 		
    81. 	.scrapingBox{
    82. 		width: 100%;
    83. 		height: 100%;
    84. 		position: absolute;
    85. 		left: 0;
    86. 		top: 0;
    87. 		box-sizing: border-box;
    88. 		padding: 52rpx 62rpx;
    89. 		
    90. 		.scrapingBoxContent{
    91. 			width: 536rpx;
    92. 			height: 318rpx;
    93. 			z-index: 2;
    94. 			position: relative;
    95. 			view {
    96. 				width: 100%;
    97. 				height: 100%;
    98. 				box-sizing: border-box;
    99. 				padding: 52rpx 116rpx;
    100. 				display: flex;
    101. 				justify-content: center;
    102. 				align-items: center;
    103. 				font-size: 72rpx;
    104. 				font-family: PingFangSC-Semibold, PingFang SC;
    105. 				font-weight: 600;
    106. 				color: #1B9AF9;
    107. 				text-shadow: 0px 4px 8px rgba(149,216,255,0.5);
    108. 			}
    109. 		}
    110. 	}
    111. }
    112.  
    113. .count{
    114. 	display: flex;
    115. 	justify-content: center;
    116. 	margin-top: 44rpx;
    117. 	
    118. 	.tip{
    119. 		font-size: 28rpx;
    120. 		font-family: PingFangSC-Medium, PingFang SC;
    121. 		font-weight: 500;
    122. 		color: #777777;
    123. 		text{
    124. 			color: #0039AF;
    125. 		}
    126. 	} 
    127. }
    128.  
    129. .btns{
    130. 	display: flex;
    131. 	align-items: center;
    132. 	justify-content: space-between;
    133. 	margin-top: 26rpx;
    134. }
    135. 	
    136. .btn{
    137. 	width: 376rpx;
    138. 	height: 166rpx;
    139. 	position: relative;
    140. 	.btnImg{
    141. 		width: 100%;
    142. 		height: 100%;
    143. 	}
    144. 		
    145. 	.btnConent{
    146. 		width: 100%;
    147. 		position: absolute;
    148. 		top: 50%;
    149. 		transform: translateY(-100%);
    150. 		display: flex;
    151. 		justify-content: center;
    152. 		align-items: center;
    153. 		image{
    154. 			width: 42rpx;
    155. 			height: 42rpx;
    156. 			margin-right: 12rpx;
    157. 		}
    158. 		text{
    159. 			font-size: 42rpx;
    160. 			font-family: PingFangSC-Medium, PingFang SC;
    161. 			font-weight: 500;
    162. 			color: #FFFFFF;
    163. 		}
    164. 	}
    165. 	
    166. }
    167. 	
    168.  
    169. .win{
    170. 	width: 750rpx;
    171. 	height: 100vh;
    172. 	background: rgba(0, 0, 0, 0.8);
    173. 	position: fixed;
    174. 	top: 0;
    175. 	left: 0;
    176. 	z-index: 2;
    177. 	display: flex;
    178. 	flex-direction: column;
    179. 	align-items: center;
    180. 	justify-content: center;
    181. }
    182.  
    183. .win_box{
    184. 	width: 662rpx;
    185. 	height: 60%;
    186. 	padding: 40rpx;
    187. 	box-sizing: border-box;
    188. 	border-radius: 24rpx;
    189. }
    190.  
    191. .win_box_bg{
    192. 	background: #C3E5FE;
    193. }
    194.  
    195. .bg3{
    196. 	background: #C3E5FE;
    197. }
    198.  
    199. .iconcolseIcon{
    200. 	font-size: 58rpx;
    201. 	margin-top: 98rpx;
    202. }
    203.  
    204. .win_box1{
    205. 	width: 630rpx;
    206. 	height: 922rpx;
    207. 	position: relative;
    208. }
    209.  
    210. .win_bg{
    211. 	width: 630rpx;
    212. 	height: 922rpx;
    213. }
    214.  
    215. .win_content{
    216. 	width: 630rpx;
    217. 	height: 922rpx;
    218. 	position: absolute;
    219. 	left: 0;
    220. 	top: 0;
    221. 	display: flex;
    222. 	flex-direction: column;
    223. 	align-items: center;
    224. }
    225.  
    226. .win_tips{
    227. 	font-size: 48rpx;
    228. 	font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    229. 	font-weight: bold;
    230. 	margin-top: 290rpx;
    231. }
    232.  
    233. .win_title{
    234. 	font-size: 48rpx;
    235. 	font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    236. 	font-weight: bold;
    237. 	color: #FE6631;
    238. 	margin: 170rpx 0;
    239. }
    240.  
    241. .win_btn{
    242. 	width: 280rpx;
    243. 	height: 80rpx;
    244. 	line-height: 80rpx;
    245. 	text-align: center;
    246. 	background: #FFE047;
    247. 	border-radius: 46rpx;
    248. 	font-size: 32rpx;
    249. 	font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    250. 	font-weight: bold;
    251. 	color: #13112C;
    252. }
    253.  
    254. .win_tit{
    255. 	font-size: 48rpx;
    256. 	font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    257. 	font-weight: bold;
    258. 	margin-bottom: 32rpx;
    259. }
    260.  
    261. .win_box2{
    262. 	width: 662rpx;
    263. 	height: 900rpx;
    264. 	background: #FFFFFF;
    265. 	border-radius: 24rpx;
    266. 	display: flex;
    267. 	flex-direction: column;
    268. }
    269.  
    270. .items{
    271. 	width: 662rpx;
    272. 	height: 108rpx;
    273. 	background: #C3E5FE;
    274. 	border-radius: 24rpx 24rpx 0rpx 0rpx;
    275. 	display: flex;
    276. 	align-items: center;
    277. 	flex-shrink:0
    278. }
    279.  
    280. .left,.right{
    281. 	width: 50%;
    282. 	text-align: center;
    283. 	font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    284. 	font-weight: bold;
    285. }
    286.  
    287. .i_title{
    288. 	font-size: 36rpx;
    289. }
    290.  
    291. .list{
    292. 	height: 792rpx;
    293. 	padding-bottom: 20rpx;
    294. 	overflow: hidden;
    295. }
    296.  
    297. .item{
    298. 	width: 662rpx;
    299. 	height: 88rpx;
    300. 	display: flex;
    301. 	align-items: center;
    302. 	justify-content: space-around;
    303. }
    304.  
    305. .item:nth-child(2n){
    306. 	background-color: #F4F4F4;
    307. }
    308.  
    309. .r_btn{
    310. 	width: 160rpx;
    311. 	height: 60rpx;
    312. 	line-height: 60rpx;
    313. 	text-align: center;
    314. 	background: #FFC659;
    315. 	border-radius: 46rpx;
    316. 	font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    317. 	font-weight: bold;
    318. 	font-size: 32rpx;
    319. 	margin:0 auto;
    320. }

    效果:

  • 相关阅读:
    nginx转发https：SSL_do_handshake() failed
    疆御3行业版无人机基础飞行操作教程，教程适用于DJI Mavic 3E、DJI Mavic 3T
    LuatOS-SOC接口文档(air780E)-- fonts - 字体库
    【python】list 删除列表中某个元素的3种方法；附加删除numpy数组中的指定索引元素的方法
    每天一道大厂SQL题【Day26】脉脉真题实战(二)活跃时长的均值
    【面试题】如何去掉vue的url地址中的#号?及其原理？
    Docker学习笔记
    Java里使用AspectJ实现AOP
    kotlin基础教程：＜4＞内置函数的使用
    深入体验Java Web开发内目-核心基础 PDF篇
  • 原文地址：https://blog.csdn.net/qq_43235503/article/details/134211690