手机端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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 查看演示 源码下载 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果. HTML 我们只需要在页面中加入canvas标签元素,其他的就看
-
javascript+canvas实现刮刮卡抽奖效果
运用canvas做的简单刮刮卡效果,每次刷新可重新测试 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me
-
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
绝对值得看的来篇,哈哈.本人亲自完成,有错误请大家指出: 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie>=10,如果网友想要的话我就去写个 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"&g
-
2种jQuery 实现刮刮卡效果
其中拖拽刮涂层效果使用jquery UI的draggable方法 以下是源代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
-
canvas实现刮刮卡效果
目前在html5和css3的热潮下,html页面的效果也是层出不穷,下面我们来介绍使用canvas来模仿刮奖刮开效果. 原理 在需要刮出的图片或者文字上方盖上一层灰色或者其他背景的canvas画布,当手指或者鼠标点击画布并移动时,将画布上移动过的轨迹变成透明即可. 分析 demo中在class为content的div上盖上一层灰色的画布,然后通过获取鼠标和手指的坐标计算出在画布位置上的坐标,通过在坐标原点位置画一个半径10px的透明圆形来透过画布,显示出画布下的内容.本demo是用时需要改变的内
-
手机端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=&qu
-
手机端实现Bootstrap简单图片轮播效果
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先是本地站点搭建:win+R输入mmc打开控制台,文件-添加/删除管理单元,Internet信息服务.添加确定,右侧基本信息,新建网站-把路径改了.设定一个端口号,手机浏览器就可以输入 电脑局域网ip:端口号 就可以连上去了. 接下来问题来了,一个个点击查看然后关闭图片是一件更不环保的事.何不做一个
-
移动端刮刮乐的实现方式（js+HTML5）
程序员有一种惯性思维,就是看见一些会动的东西(带点科技含量的,猫啊,狗啊就算了),总要先想一遍,这玩意用代码是怎么控制的.比如电梯,路边的霓虹灯,遥控器,小孩子的玩具等,都统统被程序员"意淫"过. 有时候还会感觉程序员看世界会看的透彻一点............. 想必大家都玩过刮刮乐,下面就介绍一种刮刮乐的移动端实现方式!用到canvas 1.用HTML 5 canvas globalCompositeOperation 属性实现刮刮乐 思路: (1)首先需要一个盒子定位,确定刮刮乐
-
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
本文实例讲述了jQuery使用eraser.js插件实现擦除.刮刮卡效果的方法.分享给大家供大家参考,具体如下: jquery.eraser是一款使用鼠标或触摸的动作来擦除画布显示真正图片的插件.jquery.eraser插件的原理是用一个画布遮住图片,然后根据触摸或鼠标输入来擦除画布显示图片,您可以在参数中指定一个回调函数设置画笔大小. 使用需知: 必须确保图片是完全加载之后调用eraser(),否则它不会工作.插件正常运行在Safari,Chrome OS X和Windows,Android
-
js实现PC端和移动端刮卡效果
本文实例为大家分享了js刮卡效果的具体代码,供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <ti
-
js HTML5手机刮刮乐代码
手机刮刮乐HTML5代码, 使用原型prototype扩展了一个clearArc 清除圆内像素的功能, 此功能未完成扇形清除功能, 此外,在清除圆内的像素时,还有点瑕疵,右边和下边还不够圆滑,有明显的齿状.如果你找到修复方法请一定要告诉我哟.不过此清除方法用于刮刮乐已经完全满足需求了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="view
-
PHP微信刮刮卡 附微信接口
无论大转盘也好,或者是刮刮卡都是抽奖都可以利用同样的方法来计算中奖的概率和控制奖池的数量,本文为大家分享了PHP微信刮刮卡实例代码,PHP微信刮刮卡+接口,可直接调用,自带微信接口,供大家学习. 效果图: prize.php <?php $rand = rand(1,100); if($rand<10){ $prize = '苹果1个'; }else if($rand<30){ $prize = '苹果2个'; }else if($rand<60){ $prize = '苹果3个'