利用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 相关文章推荐
BOM与DOM的区别分析
Oct 26 Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
详解JavaScript函数
Dec 01 Javascript
VUE实现日历组件功能
Mar 13 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
JavaScript获取当前url路径过程解析
Dec 27 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
松下Panasonic RF-B65电路分析
2021/03/02 无线电
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
老生常谈js中的MVC
2017/07/25 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
python try 异常处理(史上最全)
2019/03/07 Python
pandas针对excel处理的实现
2021/01/15 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
工作表现评语
2014/01/19 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript