简要步骤如下
1.绘制底图 载体任意DOM CANVAS 图片皆可
2.canvas绘制交互区域 纯色或图片皆可
3.设定混合模式 "destination-out" 关键
4.根据交互情况绘制清理区域
计算绘制结果
1.原理：检测canvas绘制结果像素点的透明度情况
2.要点：像素过多的情况不必每个像素都对应检测 耗时过大 可自行设计采样方式
演示链接：
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小互动-刮刮卡</title>
<meta name="viewport"
content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1,viewport-fit=cover">
</head>
<style>
.bottom {
position: absolute;
width: 300px;
height: 200px;
background-color: yellow;
color: red;
font-size: 50px;
text-align: center;
}
#canvas {
position: absolute;
}
#result {
position: absolute;
top: 200px;
}
</style>
<body style="margin:0;padding:0;" ontouchmove="javascript:window.event.preventDefault();">
<div class="bottom">
谢谢惠顾
</div>
<canvas id="canvas" width="300" height="200"></canvas>
<p id="result">0%</p>
</body>
<script type="text/javascript">
let cv = document.getElementById('canvas');
let width = cv.width;
let height = cv.height;
let ctx = cv.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, width, height);
//混合模式
ctx.globalCompositeOperation = "destination-out";
function drawClearArea(x, y) {
ctx.moveTo(x, y);
ctx.arc(x, y, 20, 0, Math.PI * 2, false);
ctx.fill();
}
document.addEventListener('mousedown', onDocumentMouseDown, false);
function onDocumentMouseDown(event) {
event.preventDefault();
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseMove(event) {
var x = event.clientX;
var y = event.clientY;
drawClearArea(x, y);
}
function onDocumentMouseUp() {
document.getElementById('result').innerHTML = Math.floor(checkAlpha() * 100) + "%";
document.removeEventListener('mousemove', onDocumentMouseMove);
document.removeEventListener('mouseup', onDocumentMouseUp);
}
document.addEventListener('touchmove', onDocumentTouchMove, false);
document.addEventListener('touchend', onDocumentTouchEnd, false);
function onDocumentTouchMove(event) {
let x = event.changedTouches[0].clientX;
let y = event.changedTouches[0].clientY;
drawClearArea(x, y);
}
function onDocumentTouchEnd(event) {
document.getElementById('result').innerHTML = Math.floor(checkAlpha() * 100) + "%";
}
function checkAlpha() {
var mydata = ctx.getImageData(0, 0, cv.width, cv.height);
var data = mydata.data;
var count = 0;
let sk = width / 10; //采样间隔
let sc = Math.floor(data.length / sk); //采样总数
for (var i = 0; i < sc; i++) {
var a = data[i * sk + 3];
if (a == 0) {
count++;
}
}
let progress = count / sc;
return progress
}
</script>
</html>
