利用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 相关文章推荐
js 遍历对象的属性的代码
Dec 29 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
jstree的简单实例
2016/12/01 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
js如何找出字符串中的最长回文串
2018/06/04 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
Python数据结构之单链表详解
2017/09/12 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
简单了解python中的与或非运算
2019/09/18 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
django有哪些好处和优点
2020/09/01 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
求职简历中自我评价
2014/01/28 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
优秀班主任材料
2014/12/16 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
退伍军人感言
2015/08/01 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
mysql 子查询的使用
2022/04/28 MySQL