话不多说，上源码
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 5 <title>刮刮卡改造版本</title> 6 <style type="text/css"> 7 * { 8 padding: 0; 9 margin: 0; 10 list-style: none; 11 } 12 13 body { 14 background: #df412b; 15 position: relative; 16 } 17 18 .banner1 { 19 display: block; 20 100%; 21 height: auto; 22 overflow: hidden; 23 } 24 25 .ggl { 26 position: relative; 27 85.6%; 28 height: 90px; 29 margin: -5px auto; 30 background: url(img/ggl.png) no-repeat center center; 31 background-size: 100% 100%; 32 } 33 34 .canvas { 35 position: absolute; 36 top: 2px; 37 left: 2.5%; 38 95%; 39 height: 82px; 40 line-height: 82px; 41 text-align: center; 42 z-index: 2; 43 } 44 45 .info { 46 position: absolute; 47 top: 2px; 48 left: 2.5%; 49 95%; 50 height: 82px; 51 text-align: center; 52 } 53 54 .info span { 55 display: block; 56 font-size: 18px; 57 } 58 59 #prompt { 60 line-height: 40px; 61 } 62 63 .btn { 64 position: relative; 65 50%; 66 height: 35px; 67 line-height: 35px; 68 background: #df412b; 69 color: #fff; 70 border-radius: 5px; 71 margin: 0 auto; 72 z-index: 1; 73 } 74 75 .guize { 76 display: block; 77 85.6%; 78 height: auto; 79 margin: 5% auto 10% auto; 80 border-radius: 5px; 81 } 82 83 .num { 84 100%; 85 height: 30px; 86 line-height: 30px; 87 text-align: center; 88 font-size: 14px; 89 margin-top: 5%; 90 } 91 92 #ok, #no { 93 display: none; 94 } 95 96 .pop { 97 position: fixed; 98 left: 0; 99 top: 0; 100 z-index: 3; 101 100%; 102 height: 100%; 103 background: rgba(0,0,0,0.6); 104 display: none; 105 } 106 107 .pop img { 108 100%; 109 height: auto; 110 overflow: hidden; 111 margin: 15% auto; 112 } 113 </style> 114 </head> 115 <body> 116 117 <div> 118 <div style="height:200px;"></div> 119 <div> 120 <div style="height:200px;"></div> 121 <div class="ggl" id="top"> 122 <div class="info" id="prize"> 123 <span id="prompt">恭喜您，中奖了！</span> 124 <span class="btn" id="ok" style="z-index: 1; display: block;">领取奖品</span> 125 <span class="btn" id="no" style="z-index: 1; display: none;">再来一次</span> 126 </div> 127 <canvas id="c1" class="canvas" width="305" height="82"></canvas> 128 </div> 129 <div style="height:200px;"></div> 130 </div> 131 </div> 132 <script type="text/javascript"> 133 //获取元素的横坐标（相对于窗口） 134 function getLeft(e) { 135 var offset = e.offsetLeft; 136 if (e.offsetParent != null) offset += getLeft(e.offsetParent); 137 return offset; 138 } 139 140 //获取元素的纵坐标（相对于窗口） 141 function getTop(e) { 142 var offset = e.offsetTop; 143 if (e.offsetParent != null) offset += getTop(e.offsetParent); 144 return offset; 145 } 146 147 148 var c1; //画布 149 var ctx; //画笔 150 var ismousedown; //标志用户是否按下鼠标或开始触摸 151 var isOk = 0; //标志用户是否已经刮开了一半以上 152 var fontem = parseInt(window.getComputedStyle(document.documentElement, null)["font-size"]);//这是为了不同分辨率上配合@media自动调节刮的宽度 153 var messageW = 230, messageH = 62; //中奖信息区域的宽度和高度(不允许超过画布区域) 154 var arcPrint = []; 155 156 157 function initCanvas() { 158 159 ctx.globalCompositeOperation = "source-over"; 160 ctx.fillStyle = '#aaaaaa'; 161 ctx.fillRect(0, 0, c1.clientWidth, c1.clientHeight); 162 ctx.fill(); 163 ctx.font = "Bold 30px Arial"; 164 ctx.textAlign = "center"; 165 ctx.fillStyle = "#999999"; 166 ctx.fillText("刮一刮", c1.width / 2, 50); 167 168 //有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法 169 ctx.globalCompositeOperation = 'destination-out'; 170 } 171 172 173 174 function eventDown(e) { 175 e.preventDefault(); 176 ismousedown = true; 177 } 178 179 180 function eventUp(e) { 181 e.preventDefault(); 182 //计算消息区域的做包 183 var c1 = document.getElementById("c1"); //相对于父对象的编剧 184 var c1W = c1.width, c1H = c1.height; 185 var messageRect = { x: (c1W - messageW) / 2, y: (c1H - messageH) / 2, angx: (c1W - messageW) /2 + messageW, angy: (c1H - messageH) / 2 + messageH }; 186 187 for (var i = 0; i < arcPrint.length; i++) { 188 //计算极限交集区域坐标系统，需要半径支持 189 var cirXY = { x: messageRect.x - fontem * 1.2, y: messageRect.y - fontem * 1.2, angx: messageRect.angx + fontem * 1.2, angy: messageRect.angy + fontem*1.2 }; 190 191 //只要圆心点坐标再极限区域内，即表示有交集 192 if (arcPrint[i].x > cirXY.x && arcPrint[i].x < cirXY.angx && arcPrint[i].y > cirXY.y && arcPrint[i].y < cirXY.angy) { 193 194 195 isOk = 1; 196 197 var x = 10, y = 10; 198 ctx.beginPath(); 199 //ctx.arc(x, y, fontem * 1.2, 0, Math.PI * (c1.height / 2), true); 200 ctx.fillRect(x, y, c1.clientWidth - 2 * x, c1.clientHeight - 2 * y); 201 //下面3行代码是为了修复部分手机浏览器不支持destination-out 202 //我也不是很清楚这样做的原理是什么 203 c1.style.display = 'none'; 204 c1.offsetHeight; 205 c1.style.display = 'inherit'; 206 ctx.fill(); 207 208 } 209 } 210 211 ismousedown = false; 212 } 213 214 215 //鼠标移动 和 触摸移动 216 function eventMove(e) { 217 e.preventDefault(); 218 if (ismousedown) { 219 if (e.changedTouches) { 220 e = e.changedTouches[e.changedTouches.length - 1]; 221 } 222 var c1 = document.getElementById("c1"); //相对于父对象的编剧 223 var oX = getLeft(c1), oY = getTop(c1); //相对于top的左边距和上边距 224 var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0, //x坐标：可视区域x坐标+滚动的像素（或 相对文档区域的x） 225 y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0; //坐标 226 227 //画360度的弧线，就是一个圆，因为设置了ctx.globalCompositeOperation = 'destination-out'; 画笔半径是2 228 //画出来是透明的 229 ctx.beginPath(); 230 ctx.arc(x, y, fontem * 1.2, 0, Math.PI * 2, true); 231 232 arcPrint.push({ x: x, y: y }); 233 //下面3行代码是为了修复部分手机浏览器不支持destination-out 234 //我也不是很清楚这样做的原理是什么 235 c1.style.display = 'none'; 236 c1.offsetHeight; 237 c1.style.display = 'inherit'; 238 ctx.fill(); 239 } 240 if (isOk) { 241 var btn = document.getElementsByClassName("btn"); 242 for (var i = 0; i < btn.length; i++) { 243 btn[i].style.zIndex = '3'; 244 } 245 246 document.getElementsByClassName("btn")[0].style.zIndex = "3"; 247 } 248 } 249 250 251 252 window.onload = function () { 253 c1 = document.getElementById("c1"); 254 //这里很关键，canvas自带两个属性width、height,我理解为画布的分辨率，跟style中的width、height意义不同。 255 //最好设置成跟画布在页面中的实际大小一样 256 //不然canvas中的坐标跟鼠标的坐标无法匹配 257 c1.width = c1.clientWidth; 258 c1.height = c1.clientHeight; 259 ctx = c1.getContext("2d"); 260 //PC端的处理 261 c1.addEventListener("mousemove", eventMove, false); 262 c1.addEventListener("mousedown", eventDown, false); 263 c1.addEventListener("mouseup", eventUp, false); 264 //移动端的处理 265 c1.addEventListener('touchstart', eventDown, false); 266 c1.addEventListener('touchend', eventUp, false); 267 c1.addEventListener('touchmove', eventMove, false); 268 //初始化 269 initCanvas(); 270 } 271 272 </script> 273 </body> 274 </html>
效果图参考这个博客，我直接改版该作者的
http://www.cnblogs.com/aliyue/p/5563334.html