<!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>