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 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
实现无刷新联动例子汇总
May 20 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
Python删除n行后的其他行方法
2019/01/28 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python计算无向图节点度的实例代码
2019/11/22 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
英国电子专家:maplin
2019/09/04 全球购物
网络营销策划方案
2014/06/04 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
竞聘自述材料
2014/08/25 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
python利用while求100内的整数和方式
2021/11/07 Python