话不多说,附上 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 ,蟹蟹~~~
网友评论