--- theme: cyanosis --- 哈喽，各位好呀，今天小编来分享一篇关于 `Uniapp` 内容的实战类文章，如果你觉得还不错，希望给小编点个赞呗(✪ω✪)。 ## 写在开头首先，咱们先来初始化一个 `Uniapp` 项目，你可以跟着 [官网](https://uniapp.dcloud.net.cn/quickstart-hx.html) 来创建，也可以看看小编的另一篇文章 [通过vue-cli初始化uniapp项目，支持HBuilderX与cli启动](https://juejin.cn/post/7121599656231960589) 来创建😀。然后，在项目中新建 `ScrapingHappy.vue` 组件，在首页 `index.vue` 文件中引入： ```javascript ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/21f45fff12be4feca1efcf7689c1a1ec~tplv-k3u1fbpfcp-watermark.image?) 接下来，我们就专心编码 `ScrapingHappy.vue` 组件就行啦。 ## 组件结构与样式 "刮刮乐" 组件的实现主要核心在于对逻辑的编写，其 `HTML` 结构与 `CSS` 样式相对比较简单，我们直接来看看就行。 ```javascript ``` 该功能原理大概就是将 `canvas` 定位在上方，用户刮开 `canvas` 即可看到底下的中奖信息，这个信息可以是文案、图片、`GIF` 等等，这就看你实际的业务需求了💀。 ## 绘制涂层接下来第一步，我们来实现刮刮乐的涂层，其实也就是给 `canvas` 上个色🎨。 ```javascript ``` 由于可能需要对涂层进行一些自定义的配置，所以把涂层的颜色与消除涂层"画笔"大小两个属性定义成 `props`，提供给外部自定义配置😯。其他逻辑主要是对 `canvas API` 的使用，对其还不熟悉的小伙伴们快去加强加强。[传送门](https://uniapp.dcloud.net.cn/api/canvas/CanvasContext.html) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7396fa4b07cd46d591ce938b34b0700a~tplv-k3u1fbpfcp-watermark.image?) ## 绘制水印绘制完涂层后，Em......有点单调😕，正常我们看到的刮刮乐涂层上应该还有一些水印啥的，这样看起来会好看一点，就像这样：

Em...好，那我们也给它整上，这都不是事😊。 ```javascript ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ebdeb3634fda42e787b334491a607378~tplv-k3u1fbpfcp-watermark.image?) 同样，水印的一些属性我们也定义成 `props` 提供给外部自定义。绘制水印主要使用 [CanvasContext.fillText](https://uniapp.dcloud.net.cn/api/canvas/CanvasContext.html#canvascontext-filltext) 方法，它接收四个参数。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5692fa8e10194130bc42799bc2211590~tplv-k3u1fbpfcp-watermark.image?) 而 `x` 与 `y` 参数是我们比较要关注的，如何在 `canvas` 画布上正确计算出每个水印文案的位置是关键，不同的计算逻辑绘制出来的水印位置也不同，网上有很多现成的方法，你可以看看哪种更加合适你👻。 ## 绘制标题现在整体好看一些了，咱们顺手再来把中间的标题给绘制上，同样的配方，同样的操作。 ```javascript ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69ca45e11cd74de683745eb03082a3d3~tplv-k3u1fbpfcp-watermark.image?) 这都不是事😁。 ## 实现刮一刮交互接下来，要实现刮刮乐组件的核心功能 "刮" 的交互逻辑，咱们先看代码再做解释： ```javascript ``` ![56.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec0be2da4ba24140b6bc3f35243336c7~tplv-k3u1fbpfcp-watermark.image?) 上面我们绑定了 `touchstart` 、 `touchmove`、 `touchend` 三个事件，而其中实现涂层的清除是利用了 [CanvasContext.clearRect](https://uniapp.dcloud.net.cn/api/canvas/CanvasContext.html#canvascontext-clearrect) 方法，该方法能清除画布上在该**矩形区域**内的内容。 ## 实现绘制过半自动刮完到这里其实刮刮乐的功能基本已经实现完了，但是我们再来实现一个功能，就是当用户刮了一半，或者刮了百分之多少的时候，我们就自动将整个涂层全部刮完展开，这样能提升一下用户的体验。那么，具体应该怎么做呢？怎么来判断用户当前刮了多少了呢？同样，我们先看代码： ```javascript ``` 效果如下： ![57.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d254d408a444c04b5f2899a8e1e6262~tplv-k3u1fbpfcp-watermark.image?) 要实现这个功能，核心点就是要知道用户当前刮了多少，知道了这个"值"，我们就能一往无前，实现该功能，那具体要怎么计算得到呢？这里其实是利用了 [uni.canvasGetImageData](https://uniapp.dcloud.net.cn/api/canvas/canvasGetImageData.html#canvasgetimagedata) 这个`API`，以下是官方对它的描述： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f8b8e62f5d4e464081c3f2865e848434~tplv-k3u1fbpfcp-watermark.image?) 初看有点懵😣，具体使用了一下（涂层铺满），它返回来的结果是这样子的： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/591710c8998a401c8e0d89386d28fcc8~tplv-k3u1fbpfcp-watermark.image?) 仔细分析后发现，返回来的 `data` 数组中，每 "4" 项，则表示一个**像素点**的 `rgba` 值，整个数组就是整个 `canvas(涂层)` 所有点的 `rgab` 值。当小编刮除了左上角的一些涂层，它返回的是这样子的： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/504442018eb34cc6ac097dbf41d6e075~tplv-k3u1fbpfcp-watermark.image?) 噢，原来如此😲，好像懂了懂了。只要我们计算一下有多少个点被刮除，再除以数组中所有点，不就能得到我们想要的了😀。 > 当前刮除的值 = 被刮除的点 / 所有点 * 100 那我们是不是判断一个点的 "4" 项都等于 `0` 就算这个点刮除了？当然不是，当涂层是黑色的时候，则它的 `rgba` 值为 `rgba(0, 0, 0, 255)` ，这....😕。所以代表颜色的前三项我们是用不上了，我们只能从透明度入手，一般来说透明度小于 `0.5` 的时候，我们基本就能看到背后的东西了。 > 用一个定位蒙层遮住底下的文案，蒙层设置不同的透明度：

所以，知道上面代码中为什么 `if (allPointPixels[i + 3] < 128) {` 要取 `128` 了没？取的就是透明度 `0.5`🤠。当然，你也可以根据需求自己适当调整。剩下的就不多说啦，自己看看就行，完结，溜了溜了。 ## 完整源码 [点我点我](https://gitee.com/ydydydq/scraping-happy)
****

至此，本篇文章就写完啦，撒花撒花。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2198fba2b674f1b935a63e4abb3cbd7~tplv-k3u1fbpfcp-watermark.image) 希望本文对你有所帮助，如有任何疑问，期待你的留言哦。
老样子，点赞+评论=你会了，收藏=你精通了。