<!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>刮刮卡</title>
<style>
.container{
margin: 10px auto 20px auto;
min-height: 300px;
}
</style>
</head>
<body>
<div class="container">
<canvas></canvas>
</div>
<script>
var img=new Image(); //实例化一个图片类
var canvas=document.querySelector('canvas'); //拿到canvas的DOM对象
canvas.style.backgroundColor="transparent"; //canvas的背景为透明
canvas.style.position="absolute"; //canvas的定位方式为绝对定位
var imgs=['1.png','2.png']; //中奖和未中奖两张图片
var num=Math.floor(Math.random()*2); //随机生成0和1
img.src=imgs[num]; //图片的实例对象设置图片url
img.addEventListener('load',function(e){
var ctx;
var w=img.width, //获取图片宽度
h=img.height; //获取图片高度
var offsetX = canvas.offsetLeft, //获取canvas 相对于左边界的偏移
offsetY = canvas.offsetTop; //获取canvas 相对于上边界的偏移
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){ //拿到TouchList对象中最后一个事件对象
e=e.changedTouches[e.changedTouches.length-1];
}
var x=(e.clientX+document.body.scrollLeft || e.pageX) - offsetX || 0;
var y=(e.clientY+document.body.scrollTop || e.pageY) - offsetY || 0;
ctx.beginPath(); //创建一个新路径
ctx.arc(x,y,3,0,Math.PI*2); //绘制弧线
ctx.fill(); //填充路径
}
};
canvas.width=w; //设置宽度啊
canvas.height=h; //设置高度
canvas.style.backgroundImage='url('+img.src+')' //设置背景
ctx=canvas.getContext('2d'); //返回canvas上下文
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>
