用代码来实现一下中彩票的快乐
“我只是想中个彩票一辈子不用不上班而已，很过分吗，又不是想要天上的星星”。
前段时间经常听见这句话，但是对于我来说，中彩票的几率还是太小了，还是老老实实撸代码吧，用代码来实现一下中彩票的快乐。
实现步骤
第一步：创建结构
首先根据实现效果创建相应的结构，给刮刮乐画设置背景图片，让它看起来美观。
实现效果：
hml 代码：
xxx.hml {{ prize }}
css 代码部分：
.container { flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background-color:#284243 ; font-family: sans-serif;}/*设置刮奖背景*/.card{ width:300px; height:300px; background-image: url(/common/images/guaguale.png); background-size: cover; justify-content: space-around; align-items: center; flex-direction: column;}.prize-box{ margin-left: 5%; margin-top: 33%; width:202px;}/*开奖区域样式*/.text{ text-align: center; position: absolute; width:202px; height:43px; background-color: #fff; z-index: 1; font-size: 18px; font-weight:600;}/*刮刮乐涂层*/.canvas{ z-index: 2;}
完成后实现的效果。
第二步：写 js 代码实现上层刮刮乐涂层效果
通过 ctx.fillrect 方法实现矩形区域的涂层填充,将画布变为灰色；通过 ctx.font 设置字体大小。
ctx.filltext 实现涂层上方文字效果，ctx.fillstyle 实现文字颜色设置。在 onshow 处进行调用就能实现基础的涂层效果了。
效果图如下：
注意：这里在 oninit 处调用函数不能成功展示出画布，在 onshow 时调用才显示成功。
xxx.js onshow(){ this.draw(); }, draw(){ var el = this.$refs.canvas; var ctx = el.getcontext('2d',{ antialias: true }); this.el = el this.ctx = ctx //填充的颜色 ctx.fillstyle = 'gray'; //填充矩形 fillrect(起始x,起始y,终点x,终点y) ctx.fillrect(0, 0, 202, 43); this.ctx.fillstyle = '#000'; //绘制填充文字 this.ctx.font = 28px; this.ctx.filltext('刮开有奖', 50, 30); },
第三步：给 canvas 设置触摸事件，实现效果
给 canvas 画布上绑定触摸事件，在触摸时计算触摸点的位置，以触摸点的坐标为圆心，进行圆形区域的擦除。
触摸点坐标计算：通过触摸事件得到一个对象，将对象进行解析会得到对应的值，对数据进行处理，拿到触摸点的 x，y 坐标点。
调用 ctx.arc 方法进行画圆，选中圆形区域进行消除。
xxx.hml
xxx.js touchstart() { this.isdraw = true; }, touchmove(e) { let x = json.stringify(e.touches) //去掉中括号,将其变成对象 let x1 = x.replace(/[|]/g,'') let x2 = json.parse(x1) let x3 = json.stringify(x2) //计算触摸点位置 let x1 = parseint(json.parse(x3).localx) let y1 = parseint(json.parse(x3).localy) this.ctx.globalcompositeoperation = 'destination-out'; //画圆 this.ctx.arc(x1, y1, 10, 0, 2 * math.pi); console.log('6666666') //填充圆形 this.ctx.fill(); }, touchend() { this.isdraw = false; }, touchcancel(){ this.isdraw = false },
第四步：设置超过一定百分比清除画布
计算刮过区域的面积：使用 ctx.getimagedata 方法得到整个区域的图像信息。
getimagedata() 方法返回 imagedata 对象，该对象拷贝了画布指定矩形的像素数据。
对于 imagedata 对象中的每个像素，都存在着四方面的信息，即 rgba 值：
r - 红色（0-255）
g - 绿色（0-255）
b - 蓝色（0-255）
a - alpha 通道（0-255；0 是透明的，255 是完全可见的）
color/alpha 以数组形式存在，并存储于 imagedata 对象的 data 属性中。
通过判断像素点的 a 值是否为 0 来判断已经刮过的区域进行计算，最终将计算出的区域面积与总面积进行对比来设置刮除区域超过多少百分比时进行清除整个区域。
通过调用 ctx.clearrect 方法来进行整个区域的清除。
//计算已经刮过的区域占整个区域的百分比 getfilledpercentage(){ let imgdata = this.ctx.getimagedata(0,0,this.mwidth,this.mheight); //imgdata.data是个数组,存储着指定区域每个像素点的信息,数组中4个元素表示一个像素点的rgba值 let pixels = imgdata.data; let transpixels = []; for(let i=0;i50){ //去除画布方法一:直接将canvas涂层清除 this.ctx.clearrect(0,0,this.mwidth,this.mheight) console.log('清除画布') //方法2:将canvas涂层设置为透明 //this.ctx.fillstyle = 'rgba(255,255,255)'; //this.ctx.fillrect(0,0,this.mwidth,this.mheight) } },
源码地址： https://gitee.com/chen-qi-7/demo-g
总结
以上就是制作一个刮刮乐的详细过程了，最终效果与上面的效果一样。其实是一个很简单的功能，利用了 canvas 的一些特性来进行操作，后期还可以给其增加更多的功能，欢迎各位开发者一起讨论与研究，希望本次分享对大家的学习有所帮助。
原文标题：harmonyos基于jsapi实现刮刮乐效果
文章出处：【微信公众号：harmonyos技术社区】欢迎添加关注！文章转载请注明出处。
新唐科技模拟式 ChipCorder 系列介绍
使用C语言你内存泄露过吗？
Holtek新推出BS83A04C MCU，适应于需求低功耗产品
Cadence中Calculator的使用
降压转换器输入电容的正确选择及设计测试
用代码来实现一下中彩票的快乐
一文解析物联网混合信号设备的系统级调试
FR-4玻璃纤维布的测试方法
简仪产品助力汽车拉杆试验台实现精准测试与数据分析
抢攻智能电网 Silicon Labs推读表系统解决方案
华灿光电加强产能扩张与技术创新 寻找业绩增长新动能
华为mate40快充多少伏多少安
4G初战告捷 中国移动下一步何处去？
LED灯设计通过减少芯片数降低成本可行吗
国家市场监督局发布新能源汽车标准132项
萌达推出可应用于一体成型电感上的新型材料
温控器接线图及原理图
澎湃微PT32x033系列 | 血糖仪专题技术文章连载_01
WiFi天线对PCB布局布线和结构的要求详解
加密货币项目存在重大风险众多创业公司已经开始远离ICO
前段时间经常听见这句话，但是对于我来说，中彩票的几率还是太小了，还是老老实实撸代码吧，用代码来实现一下中彩票的快乐。
实现步骤
第一步：创建结构
首先根据实现效果创建相应的结构，给刮刮乐画设置背景图片，让它看起来美观。
实现效果：
hml 代码：
xxx.hml {{ prize }}
css 代码部分：
.container { flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background-color:#284243 ; font-family: sans-serif;}/*设置刮奖背景*/.card{ width:300px; height:300px; background-image: url(/common/images/guaguale.png); background-size: cover; justify-content: space-around; align-items: center; flex-direction: column;}.prize-box{ margin-left: 5%; margin-top: 33%; width:202px;}/*开奖区域样式*/.text{ text-align: center; position: absolute; width:202px; height:43px; background-color: #fff; z-index: 1; font-size: 18px; font-weight:600;}/*刮刮乐涂层*/.canvas{ z-index: 2;}
完成后实现的效果。
第二步：写 js 代码实现上层刮刮乐涂层效果
通过 ctx.fillrect 方法实现矩形区域的涂层填充,将画布变为灰色；通过 ctx.font 设置字体大小。
ctx.filltext 实现涂层上方文字效果，ctx.fillstyle 实现文字颜色设置。在 onshow 处进行调用就能实现基础的涂层效果了。
效果图如下：
注意：这里在 oninit 处调用函数不能成功展示出画布，在 onshow 时调用才显示成功。
xxx.js onshow(){ this.draw(); }, draw(){ var el = this.$refs.canvas; var ctx = el.getcontext('2d',{ antialias: true }); this.el = el this.ctx = ctx //填充的颜色 ctx.fillstyle = 'gray'; //填充矩形 fillrect(起始x,起始y,终点x,终点y) ctx.fillrect(0, 0, 202, 43); this.ctx.fillstyle = '#000'; //绘制填充文字 this.ctx.font = 28px; this.ctx.filltext('刮开有奖', 50, 30); },
第三步：给 canvas 设置触摸事件，实现效果
给 canvas 画布上绑定触摸事件，在触摸时计算触摸点的位置，以触摸点的坐标为圆心，进行圆形区域的擦除。
触摸点坐标计算：通过触摸事件得到一个对象，将对象进行解析会得到对应的值，对数据进行处理，拿到触摸点的 x，y 坐标点。
调用 ctx.arc 方法进行画圆，选中圆形区域进行消除。
xxx.hml
xxx.js touchstart() { this.isdraw = true; }, touchmove(e) { let x = json.stringify(e.touches) //去掉中括号,将其变成对象 let x1 = x.replace(/[|]/g,'') let x2 = json.parse(x1) let x3 = json.stringify(x2) //计算触摸点位置 let x1 = parseint(json.parse(x3).localx) let y1 = parseint(json.parse(x3).localy) this.ctx.globalcompositeoperation = 'destination-out'; //画圆 this.ctx.arc(x1, y1, 10, 0, 2 * math.pi); console.log('6666666') //填充圆形 this.ctx.fill(); }, touchend() { this.isdraw = false; }, touchcancel(){ this.isdraw = false },
第四步：设置超过一定百分比清除画布
计算刮过区域的面积：使用 ctx.getimagedata 方法得到整个区域的图像信息。
getimagedata() 方法返回 imagedata 对象，该对象拷贝了画布指定矩形的像素数据。
对于 imagedata 对象中的每个像素，都存在着四方面的信息，即 rgba 值：
r - 红色（0-255）
g - 绿色（0-255）
b - 蓝色（0-255）
a - alpha 通道（0-255；0 是透明的，255 是完全可见的）
color/alpha 以数组形式存在，并存储于 imagedata 对象的 data 属性中。
通过判断像素点的 a 值是否为 0 来判断已经刮过的区域进行计算，最终将计算出的区域面积与总面积进行对比来设置刮除区域超过多少百分比时进行清除整个区域。
通过调用 ctx.clearrect 方法来进行整个区域的清除。
//计算已经刮过的区域占整个区域的百分比 getfilledpercentage(){ let imgdata = this.ctx.getimagedata(0,0,this.mwidth,this.mheight); //imgdata.data是个数组,存储着指定区域每个像素点的信息,数组中4个元素表示一个像素点的rgba值 let pixels = imgdata.data; let transpixels = []; for(let i=0;i50){ //去除画布方法一:直接将canvas涂层清除 this.ctx.clearrect(0,0,this.mwidth,this.mheight) console.log('清除画布') //方法2:将canvas涂层设置为透明 //this.ctx.fillstyle = 'rgba(255,255,255)'; //this.ctx.fillrect(0,0,this.mwidth,this.mheight) } },
源码地址： https://gitee.com/chen-qi-7/demo-g
总结
以上就是制作一个刮刮乐的详细过程了，最终效果与上面的效果一样。其实是一个很简单的功能，利用了 canvas 的一些特性来进行操作，后期还可以给其增加更多的功能，欢迎各位开发者一起讨论与研究，希望本次分享对大家的学习有所帮助。
原文标题：harmonyos基于jsapi实现刮刮乐效果
文章出处：【微信公众号：harmonyos技术社区】欢迎添加关注！文章转载请注明出处。
新唐科技模拟式 ChipCorder 系列介绍
使用C语言你内存泄露过吗？
Holtek新推出BS83A04C MCU，适应于需求低功耗产品
Cadence中Calculator的使用
降压转换器输入电容的正确选择及设计测试
用代码来实现一下中彩票的快乐
一文解析物联网混合信号设备的系统级调试
FR-4玻璃纤维布的测试方法
简仪产品助力汽车拉杆试验台实现精准测试与数据分析
抢攻智能电网 Silicon Labs推读表系统解决方案
华灿光电加强产能扩张与技术创新 寻找业绩增长新动能
华为mate40快充多少伏多少安
4G初战告捷 中国移动下一步何处去？
LED灯设计通过减少芯片数降低成本可行吗
国家市场监督局发布新能源汽车标准132项
萌达推出可应用于一体成型电感上的新型材料
温控器接线图及原理图
澎湃微PT32x033系列 | 血糖仪专题技术文章连载_01
WiFi天线对PCB布局布线和结构的要求详解
加密货币项目存在重大风险众多创业公司已经开始远离ICO