canvas实现刮刮卡效果


Posted in Javascript onMarch 14, 2017

目前在html5和css3的热潮下,html页面的效果也是层出不穷,下面我们来介绍使用canvas来模仿刮奖刮开效果。

原理

在需要刮出的图片或者文字上方盖上一层灰色或者其他背景的canvas画布,当手指或者鼠标点击画布并移动时,将画布上移动过的轨迹变成透明即可。

分析

demo中在class为content的div上盖上一层灰色的画布,然后通过获取鼠标和手指的坐标计算出在画布位置上的坐标,通过在坐标原点位置画一个半径10px的透明圆形来透过画布,显示出画布下的内容。本demo是用时需要改变的内容为_width,_height,touchTop,touchLeft这几个参数,根据自身画布的位置自行计算即可。由于是长按事件,记得在移动端阻止浏览器默认功能。

效果图:

canvas实现刮刮卡效果

图(1)初始图

canvas实现刮刮卡效果

图(2)刮开效果

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<style>
.content,.cover{width:400px; height:400px; position:absolute; left:50%; top:50%; margin:-200px 0 0 -200px;}
.content{ font-size:48px; line-height:400px; text-align:center;}
h3{ text-align:center; line-height:200px;}
</style>
</head>
<body>
 <h3>快来刮开!!!</h3>
 <div class="content" >中奖啦~!</div>
 <canvas id="cover" class="cover" width="400" height="400"></canvas>
</body>
<script>
var isdown = false,
 cover = document.getElementById("cover"),
 covercanvas = cover.getContext("2d");
 //
 covercanvas.fillStyle="transparent";
 covercanvas.fillRect(0,0,400,400);
 function fillter( canvas ){
 canvas.fillStyle="#ccc";
 canvas.fillRect(0,0,400,400);
 }
 function isDown(e){
 e.preventDefault();
 isdown=true; 
 }
 function isUp(e){
 isdown=false; 
 }
 function draw( e ){
 e.preventDefault();
 if(isdown){
 if(e.changedTouches){
  e=e.changedTouches[e.changedTouches.length-1];
  }
 var _height= parseInt((window.innerHeight-400)/2),
 _width= parseInt((window.innerWidth-400)/2),
 touchTop=e.clientY - _height,
 touchLeft=e.clientX - _width;
 with(covercanvas){
 beginPath();
 arc(touchLeft, touchTop, 10, 0, Math.PI * 2);
 fill();
 } 
 }
 //alert(touchTop);
 }
 fillter(covercanvas);
 covercanvas.globalCompositeOperation = 'destination-out';
 cover.addEventListener('touchstart',isDown);
 cover.addEventListener('touchmove',draw);
 cover.addEventListener('touchend',isUp);
 cover.addEventListener('mousemove',draw);
 cover.addEventListener('mousedown',isDown);
 cover.addEventListener('mouseup',isUp);
</script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js刷新框架子页面的七种方法代码
Nov 20 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 #Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 #Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 #Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 #Javascript
jQuery ajax实现省市县三级联动
Mar 07 #Javascript
Javascript前端经典的面试题及答案
Mar 14 #Javascript
layer弹出层框架alert与msg详解
Mar 14 #Javascript
You might like
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
python实现在目录中查找指定文件的方法
2014/11/11 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
网络信息管理员岗位职责
2014/01/05 职场文书
服装创业计划书范文
2014/02/05 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
广告创意求职信
2014/03/17 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书