利用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 相关文章推荐
关于跨站脚本攻击问题
Dec 22 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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
加速XP搜索功能堪比vista
2007/03/22 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
Python可跨平台实现获取按键的方法
2015/03/05 Python
python编程开发之类型转换convert实例分析
2015/11/13 Python
python2.7到3.x迁移指南
2018/02/01 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
params有什么用
2016/03/01 面试题
社区学习雷锋活动总结
2014/04/25 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
监守自盗观后感
2015/06/10 职场文书
毕业设计工作总结
2015/08/14 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
PHP中多字节字符串操作实例详解
2021/08/23 PHP
nginx访问报403错误的几种情况详解
2022/07/23 Servers
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers