「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」
前言
大家好，我是cv竹叶，相信大家都喜欢看藏在未知区域的东西到底是什么。然后我就突发奇想做个简单的PC端的刮刮乐效果！
快要到年会的时候了，大家在搞年会抽奖的时候，会不会也用到刮刮乐抽奖呢？
祝大家都能抽到一等奖吧！
刮刮乐效果
html页面部分
首先，新建html页面代码。因为要可以涂鸦，所以我们需要用到canvas来做成涂鸦块，用于盖住我们的奖励文案块。这里我们用div的demo来包住canvas，然后获取鼠标点击的坐标时，我们就可以直接获取demo的x和y坐标，当做鼠标点击在canvas上的坐标传入canvas进行准确绘图了。
//样式部分
* {
margin: 0;
padding: 0;
}
#demo {
width: 320px;
margin: auto;
height: 200px;
position: relative;
}
.txtBox {
position: absolute;
top: 0;
left: 0;
width: 320px;
height: 200px;
z-index: -1;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
}
//HTML部分
<div id="demo">
<canvas id="canvasBox">浏览器不支持</canvas>
<div class="txtBox">美梦成真</div>
</div>
js部分
在这里我们开始对canvas进行操作吧，需要把canvas设置成长方形且可以涂鸦的灰色块。通过两层的绘图，一层透明，一层灰色，达到涂鸦灰色部分，就可以透过底部透明绘图看到的div信息内容了。
var canvas = document.getElementById("canvasBox");
var demo = document.getElementById("demo");
var ctx;
var w = 320,
h = 200;
var offsetX = demo.offsetLeft,
offsetY = demo.offsetTop;
var mousedown = false;
canvas.width = w;
canvas.height = h;
ctx = canvas.getContext("2d");
ctx.fillStyle = "transparent";//底部矩阵透明
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = "gray";//灰色
ctx.fillRect(0, 0, w, h);//顶部绘图填充矩阵灰色
ctx.globalCompositeOperation = "destination-out";
这样我们就绘图出了一个灰色矩阵。
其中，canvas的globalCompositeOperation属性为destination-out，会使在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
不懂的可以点击查看canvas的globalCompositeOperation属性
鼠标点击移动事件监听
在pc端，对鼠标的点击事件的监听，在鼠标点击的情况下并且移动了鼠标，我们就对鼠标的坐标进行获取，并且传递给canvas绘图出相对应的位置，达到刮刮乐的效果。
canvas.addEventListener("touchstart", eventDown);//鼠标移动开始
canvas.addEventListener("touchend", eventUp);//鼠标移动结束
canvas.addEventListener('touchmove', eventMove);//鼠标移动
canvas.addEventListener("mousedown", eventDown);//鼠标点击
canvas.addEventListener("mouseup", eventUp);//鼠标松开
canvas.addEventListener("mousemove", eventMove)//鼠标移动中
function eventDown(e) {//监听鼠标按住
e.preventDefault();
mousedown = true;
}
function eventUp(e) {//监听鼠标松开
e.preventDefault();
mousedown = false;
}
function eventMove(e) {//监听鼠标按住并移动，执行绘图函数
e.preventDefault();
if (mousedown) {
var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
ctx.beginPath()//绘图开始路径
ctx.rect(x, y, 20, 20);//创建一个正方形刮刮痕迹形状
ctx.fill();
}
}
最终效果
结言
想要在手机端的实现的话，就需要知道手机端的点击事件是什么，然后再做坐标的相减，思路差不多。
到此就做出来啦，简单叭，如果你也觉得简单的话，就点个赞叭~
