本文分享一段仅20行左右的JavaScript代码，利用HTML5 Canvas元素实现网页刮刮乐交互效果。通过监听鼠标按下、移动和抬起事件，结合globalCompositeOperation属性清除指定区域，快速实现覆盖层刮开显示底层图片的功能。
实现原理与效果展示
分享一段利用Canvas和JavaScript制作刮刮乐效果的代码，去除注释后JS部分不足20行。
最终效果如下所示。
[原图，由程序原样保留，不描述看不到的内容]
[原图，由程序原样保留，不描述看不到的内容]
HTML与CSS结构
HTML结构部分。
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>HTML部分没有特别需要注意的地方。
为了呈现良好的视觉效果，添加了一些CSS样式。
CSS样式部分。
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
width: 400px;
height: 300px;
left: 200px;
position: absolute;
z-index: -1;
}
canvas{
margin-left:200px;
}
</style>注意事项。
1. 为了清除浏览器默认样式，添加了重置代码。
*{
margin: 0;
padding: 0;
}2. 图片需要位于灰色蒙版下方，因此设置了z-index属性。
3. 图片采用绝对定位方式。
JavaScript逻辑与代码实现
JavaScript代码部分。
下面分析实现逻辑。
1. 当鼠标按下并移动时，相应区域会被刮开。
2. 当鼠标抬起时，改变鼠标位置不再执行刮开操作。
具体JS代码实现如下。
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
//画蒙布
context.beginPath();
context.fillStyle= 'grey'
context.fillRect(0,0,400,300);
//鼠标按下开刮
canvas.onmousedown=function(){
canvas.onmousemove = function(){
//获取鼠标坐标
var x = event.clientX;
var y = event.clientY;
//destination-out 显示原来的不在后来区域的部分
context.globalCompositeOperation = "destination-out";
context.beginPath();
context.arc(x-200,y,30,0,Math.PI*2);
context.fill();
}
}
//鼠标抬起不刮开
canvas.onmouseup=function(){
canvas.onmousemove = function(){
}
}
</script>需要特别注意以下几点。
1. 图片和画布向左移动了200px，因此圆的起点坐标需要相对于获取的位置减去200px。
2. globalCompositeOperation是Canvas的一个功能，用于设置或返回如何将一个源（新的）图像绘制到目标（已有的）图像上，此外还有其余10种写法。
以上这篇20行JS代码实现网页刮刮乐效果就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。