利用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 相关文章推荐
javascript Select标记中options操作方法集合
Oct 22 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
vue内置指令详解
Apr 03 Javascript
vue实现百度搜索功能
Dec 28 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 Javascript
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 Cookie的一个使用注意点
2008/11/08 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
php身份证号码检查类实例
2015/06/18 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
python获得一个月有多少天的方法
2015/06/04 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
中学家长会邀请函
2014/01/17 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
民生工作实施方案
2014/05/31 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
企业年检委托书范本
2014/10/14 职场文书
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python