咱的刮刮乐

一步步写成

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>

View Code

由此便可以作画了

2、第二步线变得透明

canvas有个属性，globalCompositeOperation = destination-out，这样被后面图形覆盖到的就会变得透明

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>

View Code

看我的100万大奖