主要利用ctx.globalCompositeOperation = 'destination-out';进行实现
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="430" height="165"></canvas>
</body>
</html>
css:
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
#canvas{
background: url('../10.jpg') no-repeat;
}
js:
没有做配置处理
import './index.css';
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = "pink";
ctx.fillRect(0,0,canvas.width,canvas.height);
let isPc = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ? false : true;
let clickStart = isPc ? 'mousedown' : 'touchstart';
let mouseMove = isPc ? 'mousemove' : 'touchmove';
let clickEnd = isPc ? 'mouseup' : 'touchend';
let drawStart = false;
function draw (x,y) {
ctx.beginPath();
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = '#FFFFFF';
ctx.arc(x,y,15,0,Math.PI * 2,false)
ctx.fill();
ctx.closePath();
}
//百分比计算
function getO () {
let imgData = ctx.getImageData(0,0,canvas.width,canvas.height).data;
let overA = 0;
// console.log(typeof imgData);//object
Array.prototype.forEach.call(imgData,(item,i) => {
if((i + 1) % 4 == 0){
overA = (item == 0 ? (overA + 1) : overA);
}
})
return ((overA / (imgData.length / 4)) * 100).toFixed(2)
}
canvas.addEventListener(clickStart, (e) => {
drawStart = true;
let x = isPc ? e.clientX : e.touches[0].clientX;
let y = isPc ? e.clientY : e.touches[0].clientY;
draw (x,y);
},false)
canvas.addEventListener(mouseMove, (e) => {
if(drawStart){
let x = isPc ? e.clientX : e.touches[0].clientX;
let y = isPc ? e.clientY : e.touches[0].clientY;
draw (x,y);
console.log(getO())
if(getO() > 60){
console.log('已经划开60%了');
ctx.beginPath();
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = '#FFFFFF';
ctx.rect(0,0,canvas.width,canvas.height)
ctx.fill();
ctx.closePath();
//移除监听事件...
}
}
})
canvas.addEventListener(clickEnd, (e) =>{
drawStart = false;
if(getO() > 60){
console.log('已经划开60%了');
ctx.beginPath();
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = '#FFFFFF';
ctx.rect(0,0,canvas.width,canvas.height)
ctx.fill();
ctx.closePath();
}
})
网友评论