效果图：
核心就是使用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. MongoDB的介绍安装与基本使用

    MongoDB的介绍安装 关于MongoDB的介绍于安装可参考:https://www.cnblogs.com/DragonFire/p/9135630.html 除了官网下载,可以下载他人下载好分享 ...

  2. CF Edu54 E. Vasya and a Tree DFS+树状数组

    Vasya and a Tree 题意: 给定一棵树,对树有3e5的操作,每次操作为,把树上某个节点的不超过d的子节点都加上值x; 思路: 多开一个vector记录每个点上的操作.dfs这颗树,同时以 ...

  3. Codeforces 832 D Misha, Grisha and Underground

    Misha, Grisha and Underground 题意:Misha 和 Grisha 是2个很喜欢恶作剧的孩子, 每天早上 Misha 会从地铁站 s 通过最短的路到达地铁站 f, 并且在每 ...

  4. Atcoder D - Black and White Tree（树dp+博弈）

    题目链接:http://agc014.contest.atcoder.jp/tasks/agc014_d 题意:有一棵树先手涂白色,后手涂黑色,直到不能再涂为止.涂完后再把所有黑色直接相邻的白色都变成 ...

  5. PAT 天梯杯 L2-020 功夫传人

    L2-020. 功夫传人 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 一门武功能否传承久远并被发扬光大,是要看缘分的.一般来 ...

  6. ☆1003 Dijstra

    循环N次 算法分为两部分: 1)找到距离最小的城市,找不到距离更小的城市时退出方法 2)更新距离 实际操作时,先初始化: 更新dis为INF,更新dis[start] = 0: 变种: 找最短路径的条 ...

  7. 三个小白是如何在三个月内搭一个基于kaldi的嵌入式在线语音识别系统的

    前面的博客里说过最近几个月我从传统语音(语音通信)切到了智能语音(语音识别).刚开始是学语音识别领域的基础知识,学了后把自己学到的写了PPT给组内同学做了presentation(语音识别传统方法(G ...

  8. PHP. 02®. Ajax异步处理、常见的响应状态、XMLHttpRequest对象及API、ajax的get/post方法、

    异步对象 a)创建异步对象 b)设置请求的url等参数 c)  发送请求 d)注册时间 e)在注册的事件中获取返回的内容并修改页面显示的内容 布尔类型不能直接用echo输出 常见的响应状态 Ajax概 ...

  9. Docker下使用disconf：极速体验

    Docker下的disconf实战全文链接 <Docker搭建disconf环境,三部曲之一:极速搭建disconf>: <Docker搭建disconf环境,三部曲之二:本地快速构 ...

  10. 5.1、顺序队列（java实现）

    1.实现代码 public class SeqQueue { private final int MaxSize = 8; private int rear; //队尾指针 private int f ...