移动端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="reset">重置</button>
<script>
//创建元素
function createCanvas(){
let ele =document.createElement("canvas");
ele.width=500;
ele.height=500;
return ele;
}
//设置背景图
function setPrize(canvas){
canvas.style.backgroundImage='url(./img/img1.jpg)';
canvas.style.backgroundSize='100% 100%';
}
//插入文档
function appendToDom(ele){
let body = document.querySelector('body');
let script=document.querySelector("script")
body.insertBefore(ele,script);
}
//设置遮罩
function mask(canvas){
let context=canvas.getContext('2d');
context.fillStyle ="grey" ;
context.fillRect(0,0,canvas.width,canvas.height)
}
//清除遮罩
function clean(canvas){
canvas.addEventListener('touchstart',function(){
canvas.addEventListener('touchmove',function(e){
//绘制橡皮擦
let x=e.touches[0].pageX-this.offsetLeft;
let y=e.touches[0].pageY-this.offsetTop;
let context=canvas.getContext('2d');
context.globalCompositeOperation="destination-out"; //橡皮擦模式 让图层可以覆盖叠加
context.beginPath(); //第一个点与别的点无法相连
context.arc(x,y,20,0,Math.PI*2);
context.fill();
checkCleanAll(e.target)
})
})
}
//判断清除面积
function checkCleanAll(canvas){
let context = canvas.getContext('2d');
//color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。
let {data} = context.getImageData(0,0,canvas.width,canvas.height);
//循环判断[r,g,b,a]
let count=0;
for(let i=0;i<data.length;i+=4){ //直接判断透明度是否为0
if(data[i]==0){
count++;
}
}
if(count>(data.length/4)*0.5){
context.clearRect(0, 0, canvas.width, canvas.height);
canvas.onmousemove=null;
canvas.onmousedown=null;
}
}
function start(){
let canvas = createCanvas();
appendToDom(canvas);
setPrize(canvas);
mask(canvas);
clean(canvas)
}
onload = start();
let reset =document.querySelector('#reset');
reset.onclick=function(){
let c =document.querySelector('canvas');
c.remove();
start();
}
</script>
</body>
</html>
pc端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="reset">重置</button>
<script>
//创建元素
function createCanvas(){
let ele =document.createElement("canvas");
ele.width=500;
ele.height=500;
return ele;
}
//设置随机背景图
function setPrize(canvas){
let rom = Math.ceil()
canvas.style.backgroundImage=`url(./img/img1.jpg)`
canvas.style.backgroundSize='100% 100%'
}
//插入文档
function appendToDom(ele){
let body = document.querySelector('body');
let script=document.querySelector("script")
body.insertBefore(ele,script);
}
//设置遮罩
function mask(canvas){
let context=canvas.getContext('2d');
context.fillStyle ="grey" ;
context.fillRect(0,0,canvas.width,canvas.height)
}
//清除遮罩
function clean(canvas){
canvas.onmousedown=function(){
console.log('鼠标按下了')
canvas.onmousemove=function(e){
//绘制橡皮擦
let x=e.pageX-e.target.offsetLeft;
let y=e.pageY-e.target.offsetTop;
let context=canvas.getContext('2d');
context.globalCompositeOperation="destination-out"; //橡皮擦模式
context.beginPath(); //第一个点与别的点无法相连
context.arc(x,y,20,0,Math.PI*2);
context.fill();
checkCleanAll(e.target)
}
}
//鼠标抬起，移除onmousemove事件
canvas.onmouseleave = canvas.onmouseup=function(){
canvas.onmousemove=null;
}
}
//判断清除面积
function checkCleanAll(canvas){
let context = canvas.getContext('2d');
let {data} = context.getImageData(0,0,canvas.width,canvas.height);
//循环判断[r,g,b,a]
let count=0;
for(let i=0;i<data.length;i+=4){
if(data[i]==0){
count++;
}
}
if(count>(data.length/4)*0.5){
context.clearRect(0, 0, canvas.width, canvas.height);
canvas.onmousemove=null;
canvas.onmousedown=null;
}
}
function start(){
let canvas = createCanvas();
appendToDom(canvas);
setPrize(canvas);
mask(canvas);
clean(canvas)
}
onload = start();
let reset =document.querySelector('#reset');
reset.onclick=function(){
let c =document.querySelector('canvas');
c.remove();
start();
}
</script>
</body>
</html>
移动端2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="overflow:hidden;padding:0;margin:0;">
<canvas></canvas>
<script type="text/javascript">
window.onload = function(){
var body = document.querySelector("body");
var img = new Image();
var canvas = document.querySelector("canvas");
body.userSelect = "none";
img.src = "img/img1.jpg";
canvas.style.backgroundImage='url('+img.src+')';
canvas.style.position = 'absolute';
img.addEventListener("load",function(){
var ctx;
var w = img.width,
h = img.height;
function layer(ctx){
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, w, h)
}
canvas.width = w;
canvas.height = h;
ctx=canvas.getContext('2d');//表示在画布上的描绘环境
layer(ctx); //描绘顶层的灰色图层
ctx.globalCompositeOperation="destination-out";
ctx.lineWidth=20
ctx.lineCap="round"
ctx.lineJoin="round";
ctx.font = "40px Arial"
ctx.fillText("刮开有惊喜", 100, 100);
ctx.fillStyle = "red";
var startX,startY,endX,endY;
canvas.addEventListener("touchstart",function(e){
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
ctx.moveTo(startX, startY);
})
canvas.addEventListener("touchmove",function(e){
endX = e.targetTouches[0].pageX;
endY = e.targetTouches[0].pageY;
ctx.lineTo(endX,endY);
ctx.stroke();
})
})
}
</script>
</body>
</html>