手机端js和html5刮刮卡效果


Posted in Javascript onSeptember 29, 2020

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

手机端js和html5刮刮卡效果

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 #Javascript
laydate.js日期时间选择插件
Jan 04 #Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 #Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 #Javascript
bootstrap laydate日期组件使用详解
Jan 04 #Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 #Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 #Javascript
You might like
Php+SqlServer实现分页显示
2006/10/09 PHP
转换中文日期的PHP程序
2006/10/09 PHP
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
跟老齐学Python之??碌某?? target=
2014/09/12 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
戴尔英国官网:Dell英国
2017/05/27 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
道德之星事迹材料
2014/05/03 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书