利用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 相关文章推荐
Jquery的each里用return true或false代替break或continue
May 21 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
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
追求程序速度,而不是编程的速度
2008/04/23 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
python绘制多个子图的实例
2019/07/07 Python
公积金单位接收函
2014/01/11 职场文书
建筑工地大门标语
2014/06/18 职场文书
企业标语大全
2014/07/01 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
七夕活动策划方案
2014/08/16 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
讨论nginx location 顺序问题
2022/05/30 Servers