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 格式化时间日期函数小结
Mar 20 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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
PHP使用feof()函数读文件的方法
2014/11/07 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
Python实现去除代码前行号的方法
2015/03/10 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
python处理二进制数据的方法
2015/06/03 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
django框架使用方法详解
2019/07/18 Python
python 常见的反爬虫策略
2020/09/27 Python
详解如何修改python中字典的键和值
2020/09/29 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
应届生自我鉴定
2013/12/11 职场文书
房地产促销活动方案
2014/03/01 职场文书
社区好人好事材料
2014/12/26 职场文书
捐款仪式主持词
2015/07/04 职场文书
少先队中队工作总结
2015/08/14 职场文书
2015年国庆节寄语
2015/08/17 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
python分分钟绘制精美地图海报
2022/02/15 Python
python中validators库的使用方法详解
2022/09/23 Python