canvas实现刮刮卡效果
canvas实现刮刮卡效果
实现步骤:
- 设置页面背景图,即刮刮卡底部图片
- 绘制canvas 刮刮卡顶部图片drawImage
- 绑定事件 addEventListener touchstart、touchmove
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>02</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#wrap {
height: 100%;
overflow: hidden;
}
#wrap > div {
height: 100%;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
canvas {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="wrap">
<div></div>
<canvas></canvas>
</div>
<script type="text/javascript">
window.onload = function(){
var canvas = document.querySelector("canvas");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
if(canvas.getContext){
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "2.jpg";
img.onload = function(){
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
canvas.addEventListener("touchstart", function(ev){
ev = ev || event;
var touchC = ev.changedTouches[0];
var x = touchC.clientX;
var y = touchC.clientY;
ctx.save();
ctx.beginPath();
ctx.globalCompositeOperation = "destination-out";
ctx.arc(x,y,25,0,360*Math.PI/180);
ctx.fill();
ctx.restore();
}) canvas.addEventListener("touchmove", function(ev){
ev = ev || event;
var touchC = ev.changedTouches[0];
var x = touchC.clientX;
var y = touchC.clientY;
ctx.save();
ctx.beginPath();
ctx.globalCompositeOperation = "destination-out";
ctx.arc(x,y,25,0,360*Math.PI/180);
ctx.fill();
ctx.restore();
})
}
} }
</script>
</body>
</html>
底图:
效果如下:
canvas实现刮刮卡效果的更多相关文章
- qt qml 刮刮卡效果
用canvas+mouseArea实现的刮刮卡效果. 表层是一层色彩,用手指划开,可看到下面的文字Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2 ...
- Html5实现移动端、PC端 刮刮卡效果
刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...
- 使用HTML5实现刮刮卡效果
你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...
- Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View
一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...
- Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...
- Android 自己定义控件实现刮刮卡效果 真的就仅仅是刮刮卡么
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 非常久以前也过一个html5的刮刮 ...
- 【Android - 自定义View】之自定义View实现“刮刮卡”效果
首先来介绍一下这个自定义View: (1)这个自定义View的名字叫做 GuaguakaView ,继承自View类: (2)这个View实现了很多电商项目中的“刮刮卡”的效果,即用户可以刮开覆盖层, ...
- 用BlendFunc实现舞台灯光和刮刮卡效果
[转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...
- HTML5 Canvas实战之刮奖效果
近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理 原理很简单,就是在刮奖区添加两个canvas, ...
随机推荐
- Dictionary 小知识
Dictionary<string, string>是一个泛型 他本身有集合的功能有时候可以把它看成数组 他的结构是这样的:Dictionary<[key], [value]> ...
- windows server 2008 不能执行bat
服务器有一个bat脚本,需要自动或手工执行,之前一直运行OK,可是突然有一天自动或手动都不能执行了,查了半天,原来是因为另一个运维人把环境变量中path的值改了,%SystemRoot%\system ...
- RFID 知识的学习
* 部分资料来自我们博士的PPT,部分来自网络和他人的论文. * 我们使用的教材是清华大学出版社出版的<智能卡技术(第四版)——IC卡.RFID标签与物联网(清华大学计算机系列教材)>(王 ...
- Walking on the path of Redis --- Redis configuration
废话开篇 Redis的安装是非常简单易操作的,但是配置就有点复杂了,要想得到高性能的Redis数据服务,深入了解下如何配置是很重要的. 配置详解 下面是主要的参数及说明,至于如何配置才能最优,目前还不 ...
- easyui的datetimebox时间格式化详解
今天公司让用easyui的datetimebox组件,而且还要让格式化成大家通用的那种,网上搜了很多,但差不多都是复制黏贴的,最后请教了下螃蟹. 感谢螃蟹抽空给做了个例子,现在拿出来和大家分享下,效果 ...
- testdirector
TestDirector是全球最大的软件测试工具提供商Mercury Interactive公司生产的企业级测试管理工具,也是业界第一个基于Web的测试管理系统
- javascript中函数表达式的问题讨论
#函数表达式 ##函数声明和函数表达式的区别 函数的定义有两种形式,一种是函数声明,一种是函数表达式 使用声明时,要注意函数声明提升现象,比如说在if语句中使用声明会出错,但是表达式就不存在这个问题 ...
- (转)微服务架构 互联网保险O2O平台微服务架构设计
http://www.cnblogs.com/Leo_wl/p/5049722.html 微服务架构 互联网保险O2O平台微服务架构设计 关于架构,笔者认为并不是越复杂越好,而是相反,简单就是硬道理也 ...
- Win10怎么批量修改文件后缀名?
Win10怎么批量修改文件后缀名?一般我们都是右击重命名,但是,如果要改的文件很多的话,这样做事不行的,该怎么批量修改后缀名呢?下面我们一起来看看两种解决办法 通常我们修改文件后缀名都是右击>& ...
- H3C交换机telnet服务认证模式配置
以H3C交换机为例,介绍telnet服务的三种认证方式配置(none无需认证,password密码认证,scheme账户+密码认证) None认证模式配置步骤:[H3C]telnet server e ...