手機端js和html5刮刮卡效果

更新時間：2020年09月29日 14:42:55 作者：東成熙就

這篇文章主要為大家詳細介紹了手機端js和html5刮刮卡效果，刮開之后是隨機生成的8位碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

H5的Canvas實現(xiàn)刮刮卡效果。刮開之后是隨機生成的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"> 
 
 //生成隨機數(shù)據(jù)。n表示位數(shù) 
 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; 
 //函數(shù)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調(diào)用以上函數(shù)，繪制圖形，并且偵聽觸控及鼠標事件，調(diào)用相應的函數(shù) 
 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"; 
 
 // 創(chuàng)建漸變 
 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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: