刮一刮游戏

话不多说,附上 demo (记得切换手机预览,刮一刮)

下面是效果图

效果图
效果图
效果图

布局样式很简单,就没截图贴出来,发一个比较关键的style样式

#guajiang {
    width: 240px;
    height: 65px;
    background: url(./img/result.png) no-repeat center;
    background-size: cover;
    margin: 0 auto;
}

然后通过js给结果添加一层颜色,这样让用户看不见,只有在刮的时候才能看见奖项

let 语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值。
let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与var关键字不同的是，它声明的变量只能是全局或者整个函数块的。--JavaScript | MDN

(妈个鸡,就是声明变量,废话真多)

let canvas = document.getElementById('mask')
let context = canvas.getContext('2d')
context.fillStyle = '#d1d1d1' // 设置填充浅灰色
context.fillRect(0, 0, 240, 65) // 填充改颜色,覆盖下方背景图片

我们需要让用户手指在刮奖区域移动时候刮掉相应的区域,运用Canvas中globalCompositeOperation属性设置为destination-out,在已经填充颜色的时候再次绘制时,然后绘制的区域就会变得透明

context.globalCompositeOperation = 'destination-out'

(简单解释就是,手指移到哪里,哪里就透明so easy)

接下来为画布创建touchmove事件,在画布上面移动时执行方法,绘制相应的圆形,圆形和之前的填充色相互消减,从而擦处灰色图层

canvas.addEventListener('touchmove', function (event) { // 手指在画布上移动时
    event.preventDefault() // 去除默认的响应行为
    let touch = event.touches[0] // 获取触摸的第一个点
    context.beginPath() // 开始路径绘制
    // 所在触摸处绘制圆形 半径20px
    context.arc(touch.pageX - canvas.offsetLeft, touch.pageY - canvas.offsetTop, 20, 0, Math.PI *
        2)
    context.closePath() // 结束路径绘制
    context.fillStyle = '#BDC3C7'  // 选择任意颜色
    context.fill() // 填充颜色
})

触摸点PageX,PageY属性返回的是整个页面的全局坐标,所以需要减去画布的x,y坐标

canvas的arc

context.arc(x,y,r,sAngle,eAngle,counterclockwise)
参数                 描述
x                   圆的中心的 x 坐标。
y                   圆的中心的 y 坐标。
r                   圆的半径。
sAngle              起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle              结束角，以弧度计。
counterclockwise    可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

然后需要判断是否刮完,继续在方法里面继续撸

let imgData = context.getImageData(0,0,240,65)  //  获取画布中的所有像素
let pixelsArr = imgData.data // 得到像素字节数据
let loop = pixelsArr.length  // 获取数据的长度
let transparent = 0           // 设置一个变量来记录变为透明度像素点数量
for (let i = 0; i < loop; i+=4 ) {  // 遍历循环每一个像素
    let alpha = pixelsArr[i + 3]  // 获取遍历每一个像素的透明值    
    if(alpha < 10){   // 当透明度小于10时 认为已被擦除
        transparent++       
    }
}
let percentage = transparent / (loop / 4)   // 计算透明像素所有像素中所占比例
if(percentage > .9){  // 比例大于90%
    document.getElementById('status').innerHTML = '刮奖结束!' // 显示刮奖结束字样
}

页面大面积,百分之九十被擦除的时候显示刮奖结束的字样

小案例来自《某书籍》,自己看的pdf的,需要的小伙伴私我吧,点我的账号私信也可以QQ:952822399 ,蟹蟹~~~