闲来无聊，就像去做点以前没有做过东西，这是我的第一篇博客，如有错误还望大家谅解！
实现思路：
1.创建一个canvas元素，canvas元素背景色设为透明，背景图片设为我们想要放置的图片，记得写canvas的globalCompositeOperation = "destination-out"属性（在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的）；
2.初始化canvas （fillstyle）填充为gray,然后写鼠标事件，通过获取鼠标坐标画圆（类似橡皮擦效果，我用的是arc,你也可以尝试用lineTo）
3.获取涂擦百分比，通过getImageData.data获去canvas像素点个数来计算，刮取得面积百分比（具体如下代码）
代码如下：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width;initial-scale=1.0">-->
<title></title>
<style type="text/css">
.demo{
width: 320px;margin: 10px auto 20px;
min-height: 300px;
}
</style>
</head>
<body>
<div class="demo">
<canvas></canvas>
</div>
<script type="text/javascript">
var bodyStyle = document.body.style;
bodyStyle.mozUserSelect = "none";
bodyStyle.webkitUserSelect = "none";
var img = new Image();
var canvas = document.querySelector("canvas");
canvas.style.backgroundColor = "transparent";
canvas.style.position = "absolute";
var imgs = ["https://img.alicdn.com/tfs/TB1lbi3bxz1gK0jSZSgXXavwpXa-500-418.jpg"];
var num = Math.floor(Math.random()*1);
img.src = imgs[num];
img.addEventListener("load", function(){
var ctx;
var w = img.width,
h = img.height;
var offsetX = canvas.offsetLeft,
offsetY = canvas.offsetTop;
var mousedown = false;
function layer(ctx){
ctx.fillStyle = "gray";
ctx.fillRect(0,0,w,h);
}
function eventDown(e){
e.preventDefault();
mousedown = true;
}
function eventUp(e){
e.preventDefault();
mousedown = false;
}
//获取百分比
function eventMove(e){
e.preventDefault();
if(mousedown){
if(e.changedTouches){
e = e.changedTouches[e.changedTouches.length -1];
}
var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
with(ctx){
beginPath()
arc(x,y,10,0,Math.PI * 2);
fill();
console.log(getFilledPercentage())
}
}
}
// 计算已经刮过的区域占整个区域的百分比
function getFilledPercentage() {
let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log(imgData)
// imgData.data是个数组，存储着指定区域每个像素点的信息，数组中4个元素表示一个像素点的rgba值
let pixels = imgData.data;
console.log(pixels)
let transPixels = [];
for(let i = 0; i < pixels.length; i += 4) {
// 严格上来说，判断像素点是否透明需要判断该像素点的a值是否等于0，
// 为了提高计算效率，这儿设置当a值小于128，也就是半透明状态时就可以了
if(pixels[i + 3] < 128) {
transPixels.push(pixels[i + 3]);
}
}
// console.log(transPixels.length,pixels.length);
return(transPixels.length / (pixels.length / 4) * 100).toFixed(2) + '%'
}
canvas.width = w;
canvas.height = h;
canvas.style.backgroundImage = 'url('+img.src+')';
ctx = canvas.getContext("2d");
ctx .fillStyle = "transparent";
ctx.fillRect(0, 0, w, h);
layer(ctx);
ctx.globalCompositeOperation = "destination-out";//在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
canvas.addEventListener("touchstart", eventDown);
canvas.addEventListener("touchend",eventUp);
canvas.addEventListener('touchmove', eventMove);
canvas.addEventListener("mousedown", eventDown);
canvas.addEventListener("mouseup", eventUp);
canvas.addEventListener("mousemove", eventMove);
})
</script>
</body>
</html>
