利用HTML5的画布Canvas实现刮刮卡效果


Posted in Javascript onSeptember 06, 2015

先给大家展示效果:

利用HTML5的画布Canvas实现刮刮卡效果

查看演示   源码下载

你玩过刮刮卡么?一不小心可以中奖的那种。今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果。

我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果。

HTML

我们只需要在页面中加入canvas标签元素,其他的就看javascript的了。注意canvas元素是HTML5才有的元素,运行在支持HTML5的现代浏览器上。

<canvas></canvas>

Javascript

首先,我们要禁用页面的鼠标选中拖动的事件,就是不运行执行选中操作。

var bodyStyle = document.body.style; 
bodyStyle.mozUserSelect = 'none'; 
bodyStyle.webkitUserSelect = 'none';

接着我们定义图片类,获取canvas元素,并设置背景和位置属性。我们在本例中用到两张随机照片,每次刷新随机一张图片作为背景。

var img = new Image(); 
var canvas = document.querySelector('canvas'); 
canvas.style.backgroundColor='transparent'; 
canvas.style.position = 'absolute'; 
var imgs = ['p_0.jpg','p_1.jpg']; 
var num = Math.floor(Math.random()*2); 
img.src = imgs[num];

然后进入主体,当检测到图片加载完的时候,首先定义一些属性和函数,函数layer()用来绘制一个灰色的正方形,eventDown()定义了按下事件eventUp()定义了松开事件,eventMove()定义了移动事件,其中当按下时,获取坐标位移,并通过arc(x, y, 10, 0, Math.PI * 2)来绘制小圆点。

img.addEventListener('load', function(e) { 
 var ctx; 
 var w = img.width, 
  h = img.height; 
 var offsetX = canvas.offsetLeft, 
  offsetY = canvas.offsetTop; 
 var mousedown = false; 
 function layer(ctx) { 
  ctx.fillStyle = 'gray'; 
  ctx.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) { 
    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调用以上函数,绘制图形,并且侦听触控及鼠标事件,调用相应的函数,请看代码:

img.addEventListener('load', function(e) { 
 //..接上段代码 
 canvas.width=w; 
 canvas.height=h; 
 canvas.style.backgroundImage='url('+img.src+')'; 
 ctx=canvas.getContext('2d'); 
 ctx.fillStyle='transparent'; 
 ctx.fillRect(0, 0, w, h);//绘制矩形 
 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);

以上内容仅供参考,大家可以结合实际情况,结合后台程序和数据库,完成一个真正的刮刮乐。以上内容是我写的利用HTML5的画布Canvas实现刮刮卡效果,希望大家喜欢。

Javascript 相关文章推荐
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 #Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 #Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 #Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 #Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 #Javascript
javascript日期处理函数,性能优化批处理
Sep 06 #Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 #Javascript
You might like
一个典型的PHP分页实例代码分享
2011/07/28 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Python3中的bytes和str类型详解
2019/05/02 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
乡镇平安建设汇报材料
2014/08/25 职场文书
环卫工人节活动总结
2014/08/29 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
优秀教师事迹材料
2014/12/15 职场文书
语文复习计划
2015/01/19 职场文书
签字仪式主持词
2015/07/03 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL