效果图：
核心就是使用ctx.globalCompositeOperation = 'destination-out';
全部代码：
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	.ggk{
		width:200px;
		height: 100px;
		border:1px solid #ccc;
		margin:0 auto;
		color:red;
		position: relative;
	}
	.ggk span{
		position: absolute;
		width:100%;
		height: 100%;
		text-align: center;
		font-size:50px;
		line-height: 100px;
	}
	canvas{
		position: absolute;
		left:0;
		top:0;
	}
	</style>
</head>
<body>

<div class='ggk'>
	<span id='span'>200元</span>
	<canvas id='canvas'></canvas>
</div>

<script type="text/javascript">
var canvas = document.getElementById("canvas");
init();

function init(){
	canvas.width = 200;
	canvas.height = 100;
	var ctx = canvas.getContext("2d");
	productResult();
	drawCover(ctx);
	drawStroke(ctx);

}
//往span内填充内容
function productResult(){
	var span = document.getElementById("span");
	var arr = ['100元','100元','200元','300元','谢谢','谢谢','谢谢','谢谢','谢谢','谢谢'];
	var text = arr[randomInt(0,arr.length-1)];
	span.innerHTML = text;
}
//产生随机值
function randomInt(from,to){
	return parseInt( Math.random()*(to-from+1)+from );
}
//绘制覆盖层==》灰色
function drawCover(ctx){
	ctx.save();
	ctx.fillStyle = "rgb(100,100,100)";
	ctx.fillRect(0,0,200,100);
	ctx.restore();
}
function  drawStroke(ctx){

	canvas.onmousedown = function(e){

		var downX = e.offsetX;
		var downY = e.offsetY;
		ctx.beginPath();
		ctx.globalCompositeOperation = 'destination-out';
		ctx.lineWidth = 10;
		ctx.moveTo(downX,downY);

		canvas.onmousemove = function(e){
			var x = e.offsetX;
			var y = e.offsetY;
			ctx.lineTo(x,y);
			ctx.stroke();
		}

	}
	canvas.onmouseup = function(){
		canvas.onmousemove = null;
	}

}

</script>

</body>
</html>
每日分享效果附带视频：https://www.3mooc.com/front/couinfo/998

H5刮刮卡效果的更多相关文章

  1. 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...

  2. Html5实现移动端、PC端 刮刮卡效果

    刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...

  3. qt qml 刮刮卡效果

    用canvas+mouseArea实现的刮刮卡效果. 表层是一层色彩,用手指划开,可看到下面的文字Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2 ...

  4. 用BlendFunc实现舞台灯光和刮刮卡效果

    [转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...

  5. 使用HTML5实现刮刮卡效果

    你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...

  6. Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View

    一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...

  7. Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...

  8. 同学帮帮 h5 刮刮卡组件：Txbb.Scratch

    同学帮帮 h5 刮刮卡组件,简洁.无依赖,支持 globals 和 amd 两种调用方式. 暂时只能用在移动端 使用方法 <div id="J-Scratch">< ...

  9. Android 自己定义控件实现刮刮卡效果 真的就仅仅是刮刮卡么

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 非常久以前也过一个html5的刮刮 ...

  10. canvas实现刮刮卡效果

    canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener  touchstart.tou ...

随机推荐

  1. MySql优化相关概念的理解笔记

    MySQL架构 查询执行流程 查询执行的流程是怎样的: 连接1.1客户端发起一条Query请求,监听客户端的‘连接管理模块’接收请求1.2将请求转发到‘连接进/线程模块’1.3调用‘用户模块’来进行授 ...

  2. 在Azure云上实现postgres主备切换

    以下是工作上实现postgres主备切换功能所用到的代码和步骤,中间走了不少弯路,在此记录下.所用到的操作系统为centos 7.5,安装了两台服务器,hostname为VM7的为Master,VM8 ...

  3. HDU 5919 - Sequence II (2016CCPC长春) 主席树 （区间第K小+区间不同值个数）

    HDU 5919 题意: 动态处理一个序列的区间问题,对于一个给定序列,每次输入区间的左端点和右端点,输出这个区间中:每个数字第一次出现的位子留下, 输出这些位子中最中间的那个,就是(len+1)/2 ...

  4. CodeForces 804C Ice cream coloring

    Ice cream coloring 题解: 这个题目中最关键的一句话是, 把任意一种类型的冰激凌所在的所有节点拿下来之后,这些节点是一个连通图(树). 所以就不会存在多个set+起来之后是一个新的完 ...

  5. codeforces 755D. PolandBall and Polygon（线段树+思维）

    题目链接:http://codeforces.com/contest/755/problem/D 题意:一个n边形,从1号点开始,每次走到x+k的位置如果x+k>n则到x+k-n的位置,问每次留 ...

  6. java课堂测试样卷-----简易学籍管理系统

    程序设计思路:分别建立两个类:ScoreInformation类(用来定义学生的基本信息以及设置set和get函数)ScoreManagement类(用来定义实现学生考试成绩录入,考试成绩修改,绩点计 ...

  7. top_down设计技巧

    写在前面的话 之前梦翼师兄和大家一起学习了层次化设计方法,大家应该懂了,哦,原来所谓的层次化设计就是将一个大的系统不断地拆分成一些便于实现的最小逻辑单元.如果大家真的只是这么想的话,那么梦翼师兄真的是 ...

  8. Spring Cloud(三)：声明式调用

    声明式服务调用 前面在使用spring cloud时,通常都会利用它对RestTemplate的请求拦截来实现对依赖服务的接口调用,RestTemplate实现了对http的请求封装处理,形成了一套模 ...

  9. Python集训营45天—Day01

    目录 1. Python简介 2. 第一个Python程序 3. 知识点梳理 序言:未来是数据的世界,而python 是一门可以高效简洁处理数据的语言,博主打算花45天左右完成python学习的从0到 ...

  10. App 冷启动与热启动及启动白屏优化

    介绍一下 app 冷启动和热启动方式来实现 app 秒开的效果.那么,先来看看什么叫冷启动和热启动. 冷启动:指 app 被后台杀死后,在这个状态打开 app,这种启动方式叫做冷启动. 热启动:指 a ...