手机端js和html5刮刮卡效果

183 阅读 0 评论 121 点赞

我是靠谱客的博主大气毛衣，这篇文章主要介绍手机端js和html5刮刮卡效果，现在分享给大家，希望可以做个参考。

H5的Canvas实现刮刮卡效果。刮开之后是随机生成的8位码。

IE8不行...

复制代码

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <title>HTML5 刮刮卡</title> 
 <link rel="stylesheet" type="text/css" href="" /> 
 <style type="text/css"> 
 .demo{width:320px; margin:10px auto 20px auto; min-height:300px;} 
 .msg{text-align:center; height:32px; line-height:32px; font-weight:bold; margin-top:50px} 
 </style> 
</head> 
 
<body> 
 <div id="main"> 
  <h2 align="center">HTML5 刮刮卡(支持手机)</a></h2> 
  <div class="msg">刮开灰色部分看看，<a href="javascript：void(0)" onClick="window.location.reload()">再来一次</a></div> 
  <div class="demo"> 
   <canvas id="canvasBotm"></canvas> 
   <canvas id="canvasTop"></canvas> 
    
  </div> 
 </div> 
 
<script type="text/javascript"> 
 
 //生成随机数据。n表示位数 
 var jschars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']; 
 function generateMixed(n) { 
  var res = ""; 
  for(var i = 0; i < n ; i ++) { 
   var id = Math.ceil(Math.random()*61); 
   res += jschars[id]; 
  } 
  //alert(res); 
  return res; 
 }      
  
 //禁用页面的鼠标选中拖动的事件 
 var bodyStyle = document.body.style; 
 bodyStyle.mozUserSelect = 'none'; 
 bodyStyle.webkitUserSelect = 'none'; 
 
 //定义图片类，获取canvas元素，并设置背景和位置属性 
 var img = new Image(); 
 var canvas = document.getElementById('canvasTop'); 
 var canvasBotm = document.getElementById('canvasBotm'); 
 canvas.style.backgroundColor='transparent'; 
 canvas.style.position = 'absolute'; 
 canvasBotm.style.backgroundColor='#f3f3f3'; //验证码背景色 
 canvasBotm.style.position = 'absolute'; 
  
 var imgs = ['p_0.jpg','p_1.jpg']; 
 var num = Math.floor(Math.random()*2); 
 img.src = imgs[num]; 
  
 img.addEventListener('load', function(e) { 
  var ctx; 
  var w = img.width, 
   h = img.height; 
  var offsetX = canvas.offsetLeft, 
   offsetY = canvas.offsetTop; 
  var mousedown = false; 
  //函数layer()用来绘制一个灰色的正方形 
  function layer(ctx) { 
   ctx.fillStyle = 'grey'; 
   ctx.fillRect(0, 0, w, h); 
  } 
  function layerBotm(ctxBotm) { 
   ctxBotm.fillStyle = 'grey'; 
   ctxBotm.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) {     //当按下时，获取坐标位移，并通过arc(x, y, 10, 0, Math.PI * 2)来绘制小圆点 
     if(e.changedTouches){ 
      e=e.changedTouches[e.changedTouches.length-1]; 
     } 
     var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0, 
      y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0; 
     with(ctx) { 
      beginPath() 
      arc(x, y, 10, 0, Math.PI * 2); 
      fill(); 
     } 
   } 
  } 
   
  //通过canvas调用以上函数，绘制图形，并且侦听触控及鼠标事件，调用相应的函数 
  canvas.width=w; 
  canvas.height=h; 
  canvasBotm.width=w; 
  canvasBotm.height=h; 
  //canvas.style.backgroundImage='url('+img.src+')'; 
  //canvas.style.backgroundColor='#f3f3f3'; 
   
  ctxBotm=canvas.getContext("2d"); 
  ctx=canvasBotm.getContext("2d"); 
  ctx.font="50px Arial"; 
 
  // 创建渐变 
  var gradient=ctx.createLinearGradient(0,0,canvas.width,0); 
  gradient.addColorStop("0","magenta"); 
  gradient.addColorStop("0.5","blue"); 
  gradient.addColorStop("1.0","red"); 
   
  //实习字体 
  ctx.fillStyle=gradient; 
  ctx.fillText(generateMixed(8),40,90);  
  //空心字体 
  ctx.strokeStyle=gradient; 
  ctx.strokeText(generateMixed(8),40,90); 
   
  ctx=canvas.getContext('2d'); 
  ctx.fillStyle='transparent'; 
  ctx.fillRect(0, 0, w, h); 
 
  layerBotm(ctxBotm); 
  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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <title>HTML5 刮刮卡</title> 
 <link rel="stylesheet" type="text/css" href="" /> 
 <style type="text/css"> 
 .demo{width:320px; margin:10px auto 20px auto; min-height:300px;} 
 .msg{text-align:center; height:32px; line-height:32px; font-weight:bold; margin-top:50px} 
 </style> 
</head> 
 
<body> 
 <div id="main"> 
  <h2 align="center">HTML5 刮刮卡(支持手机)</a></h2> 
  <div class="msg">刮开灰色部分看看，<a href="javascript：void(0)" onClick="window.location.reload()">再来一次</a></div> 
  <div class="demo"> 
   <canvas id="canvasBotm"></canvas> 
   <canvas id="canvasTop"></canvas> 
    
  </div> 
 </div> 
 
<script type="text/javascript"> 
 
 //生成随机数据。n表示位数 
 var jschars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']; 
 function generateMixed(n) { 
  var res = ""; 
  for(var i = 0; i < n ; i ++) { 
   var id = Math.ceil(Math.random()*61); 
   res += jschars[id]; 
  } 
  //alert(res); 
  return res; 
 }      
  
 //禁用页面的鼠标选中拖动的事件 
 var bodyStyle = document.body.style; 
 bodyStyle.mozUserSelect = 'none'; 
 bodyStyle.webkitUserSelect = 'none'; 
 
 //定义图片类，获取canvas元素，并设置背景和位置属性 
 var img = new Image(); 
 var canvas = document.getElementById('canvasTop'); 
 var canvasBotm = document.getElementById('canvasBotm'); 
 canvas.style.backgroundColor='transparent'; 
 canvas.style.position = 'absolute'; 
 canvasBotm.style.backgroundColor='#f3f3f3'; //验证码背景色 
 canvasBotm.style.position = 'absolute'; 
  
 var imgs = ['p_0.jpg','p_1.jpg']; 
 var num = Math.floor(Math.random()*2); 
 img.src = imgs[num]; 
  
 img.addEventListener('load', function(e) { 
  var ctx; 
  var w = img.width, 
   h = img.height; 
  var offsetX = canvas.offsetLeft, 
   offsetY = canvas.offsetTop; 
  var mousedown = false; 
  //函数layer()用来绘制一个灰色的正方形 
  function layer(ctx) { 
   ctx.fillStyle = 'grey'; 
   ctx.fillRect(0, 0, w, h); 
  } 
  function layerBotm(ctxBotm) { 
   ctxBotm.fillStyle = 'grey'; 
   ctxBotm.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) {     //当按下时，获取坐标位移，并通过arc(x, y, 10, 0, Math.PI * 2)来绘制小圆点 
     if(e.changedTouches){ 
      e=e.changedTouches[e.changedTouches.length-1]; 
     } 
     var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0, 
      y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0; 
     with(ctx) { 
      beginPath() 
      arc(x, y, 10, 0, Math.PI * 2); 
      fill(); 
     } 
   } 
  } 
   
  //通过canvas调用以上函数，绘制图形，并且侦听触控及鼠标事件，调用相应的函数 
  canvas.width=w; 
  canvas.height=h; 
  canvasBotm.width=w; 
  canvasBotm.height=h; 
  //canvas.style.backgroundImage='url('+img.src+')'; 
  //canvas.style.backgroundColor='#f3f3f3'; 
   
  ctxBotm=canvas.getContext("2d"); 
  ctx=canvasBotm.getContext("2d"); 
  ctx.font="50px Arial"; 
 
  // 创建渐变 
  var gradient=ctx.createLinearGradient(0,0,canvas.width,0); 
  gradient.addColorStop("0","magenta"); 
  gradient.addColorStop("0.5","blue"); 
  gradient.addColorStop("1.0","red"); 
   
  //实习字体 
  ctx.fillStyle=gradient; 
  ctx.fillText(generateMixed(8),40,90);  
  //空心字体 
  ctx.strokeStyle=gradient; 
  ctx.strokeText(generateMixed(8),40,90); 
   
  ctx=canvas.getContext('2d'); 
  ctx.fillStyle='transparent'; 
  ctx.fillRect(0, 0, w, h); 
 
  layerBotm(ctxBotm); 
  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>