HarmonyOS 基于JSAPI实现刮刮乐效果 原创 精华

xxx.hml

<div class="container" >
    <div class="card">
        <div class="prize-box">
<!--            开奖区域-->
            <text class="text">
                {{ prize }}
            </text>
<!--            刮刮乐涂层-->
            <canvas ref="canvas" style="width:202px;height:43px;" @touchstart="touchstart"
                    @touchmove="touchmove" @touchend="touchend" @touchcancel="touchcancel" class="canvas"></canvas>
        </div>
    </div>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

.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;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.

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);
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

xxx.hml

  <canvas ref="canvas" style="width:202px;height:43px;" @touchstart="touchstart"
                    @touchmove="touchmove" @touchend="touchend" @touchcancel="touchcancel" class="canvas"></canvas>
1.
2.
3.
4.

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
    },

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

    //计算已经刮过的区域占整个区域的百分比
    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;i<pixels.length;i+=4){
            //需要判断像素点是否透明需要判断该像素点的a值是否为0
            if(pixels[i+3] == 0){
                transPixels.push(pixels[i+3])
            }
        }
        return (transPixels.length/(pixels.length/4)*100).toFixed(2) + '%'
    },

    //设置阈值,去除灰色涂层
    handleFilledPercentage(percentage){
        percentage = percentage || 0;
        console.log('percentage =' + percentage)
        if(parseInt(percentage)>50){
            //去除画布方法一:直接将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)
        }
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.