利用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文本框(input textare)事件绑定方法教程
Apr 24 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
详解vue-router导航守卫
Jan 19 Javascript
vue+Element-ui实现登录注册表单
Nov 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生成HTML静态页面实例代码
2008/08/31 PHP
php防止sql注入代码实例
2013/12/18 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
js读取配置文件自写
2014/02/11 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
详解django2中关于时间处理策略
2019/03/06 Python
创新型城市实施方案
2014/03/06 职场文书
个人股份合作协议书
2014/10/24 职场文书
基层党支部整改方案
2014/10/25 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
服务行业标语口号
2015/12/26 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript