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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
javascript 内存模型实例详解
Apr 18 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
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.ini中文版(1)
2006/10/09 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
Vue实现简单分页器
2018/12/29 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
Python中的进程分支fork和exec详解
2015/04/11 Python
python连接字符串的方法小结
2015/07/13 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
卖车协议书
2014/04/21 职场文书
2014年团支部工作总结
2014/11/17 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
导游词之大雁塔景区
2019/09/17 职场文书