一步步写成
1、第一步
刮刮乐基本做法：用canvas画一条线，想办法让画的这条线透明，显示被遮住的内容。故第一步就是画这条线
1 <!doctype html> 2 <html> 3 <head> 4 <title>canvas paint</title> 5 <style> 6 .wrap{1200px;margin:60px auto;background:#386077;height:500px;} 7 canvas{background:#eee;} 8 </style> 9 </head> 10 <body> 11 <div class="wrap"> 12 <canvas width=1200 height=500 id="c"></canvas> 13 </div> 14 <script> 15 var ctx = c.getContext('2d'); 16 ctx.lineWidth = 2; 17 ctx.strokeStyle="#386077"; 18 ctx.beginPath(); 19 var orignx, origny, startx, starty, offsetx = c.offsetLeft, offsety = c.offsetTop; 20 function mousedown(e){ 21 orignx = e.clientX; 22 origny = e.clientY; 23 startx = orignx - offsetx; 24 starty = origny - offsety; 25 ctx.moveTo(startx, starty); 26 c.addEventListener('mousemove', mousemove, false); 27 c.addEventListener('mouseup', mouseup, false); 28 } 29 function mousemove(e){ 30 var x = e.clientX - offsetx, y = e.clientY - offsety; 31 ctx.lineTo(x, y); 32 console.log(x + ", " + y); 33 ctx.stroke(); 34 } 35 function mouseup(){ 36 c.removeEventListener('mousemove', mousemove, false); 37 c.removeEventListener('mouseup', mouseup, false); 38 ctx.stroke(); 39 } 40 c.addEventListener('mousedown', mousedown, false); 41 42 43 </script> 44 </body> 45 </html>
由此便可以作画了
2、第二步 线变得透明
canvas有个属性，globalCompositeOperation = destination-out，这样被后面图形覆盖到的就会变得透明
| destination-out | 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。 |
ok，看一个圆形：
就是这样，两者一结合，刮刮乐就出来了
3、刮刮乐
1 <!doctype html> 2 <html> 3 <head> 4 <title>canvas paint</title> 5 <style> 6 .wrap{1200px;margin:60px auto;background:#386077;height:500px;padding-top:60px;} 7 .card{position:relative;margin:60px auto;400px;height:150px;} 8 .default{text-align:center;line-height:150px;color:#ff5400;font-family:Arial;font-size:24px;} 9 #twrap{100%;height:100%;} 10 canvas{position:absolute;top:0;left:0;} 11 </style> 12 </head> 13 <body> 14 <div class="wrap"> 15 <div class="card"> 16 <div id="twrap"></div> 17 <canvas width=400 height=150 id="canvas"></canvas> 18 </div> 19 </div> 20 <script> 21 var coverColor = '#bab4a8', w = 20, text = document.createElement('div'); 22 text.className='default'; 23 text.innerHTML='恭喜您，中了一百万大奖！'; 24 var c = canvas.getContext('2d'); 25 c.globalCompositeOperation = 'source-over'; 26 c.fillStyle = coverColor; 27 c.fillRect(0,0,400,150); 28 c.font = '40px Arial'; 29 c.fillStyle = '#666'; 30 c.measureText(''); 31 c.fillText('刮刮乐', 135, 90); 32 c.globalCompositeOperation = 'destination-out'; 33 c.lineJoin = 'round'; 34 c.lineCap = 'round'; 35 c.lineWidth = w || 30; 36 c.strokeStyle = 'rgba(0,0,0,255)'; 37 c.beginPath(); 38 twrap.appendChild(text); 39 40 var orignx, origny, startx, starty, offsetx = canvas.getBoundingClientRect().left, offsety = canvas.getBoundingClientRect().top; 41 function mousedown(e){ 42 orignx = e.clientX; 43 origny = e.clientY; 44 startx = orignx - offsetx; 45 starty = origny - offsety; 46 c.moveTo(startx, starty); 47 canvas.addEventListener('mousemove', mousemove, false); 48 canvas.addEventListener('mouseup', mouseup, false); 49 } 50 function mousemove(e){ 51 var x = e.clientX - offsetx, y = e.clientY - offsety; 52 c.lineTo(x, y); 53 console.log(x + ", " + y); 54 c.stroke(); 55 } 56 function mouseup(){ 57 canvas.removeEventListener('mousemove', mousemove, false); 58 canvas.removeEventListener('mouseup', mouseup, false); 59 c.stroke(); 60 } 61 canvas.addEventListener('mousedown', mousedown, false); 62 63 </script> 64 </body> 65 </html>
看我的100万大奖
