手机端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 相关文章推荐
优化javascript的执行速度
Jan 23 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
jquery+json实现分页效果
Mar 07 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 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导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
python实现计算倒数的方法
2015/07/11 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
iostream与iostream.h的区别
2015/01/16 面试题
现代化办公人员工作的自我评价
2013/10/16 职场文书
中医专业应届生求职信
2013/11/17 职场文书
篮球赛口号
2014/06/18 职场文书
2014年电教工作总结
2014/12/19 职场文书
居住证明范文
2015/06/17 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫