说明：栗子转自简书，在他的基础上添加了重置和超过一定面积显示全图，仅做学习使用。（推荐7.2的代码）
1.前端时间做的一个项目需要支持多终端，网页版需要使用html5中canvas画布对象对一组数据进行渲染还原，但是在实际实现过程中遇到了一个问题，canvas中没有mask（遮罩）层的概念，所以一些效果实现不了，最后翻看文档的时候发现可以通过Context对象的globalCompositeOperation属性或者Context的clip()裁剪路径方法实现遮罩的效果。
2.globalCompositeOperation属性介绍
接下来先详细了解下Context的globalCompositeOperation的各种值描述，由于项目不便演示最后我们通过它来实现一个刮刮卡的效果来学习使用它。
| 属性值 | 描述 | 显示效果 |
|---|---|---|
| source-over (default) | 新图形会覆盖在原有内容之上 |
|
| destination-over | 会在原有内容之下绘制新图形 |
|
| source-in | 新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的 |
|
| destination-in | 原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的 |
|
| source-out | 结果是只有新图形中与原有内容不重叠的部分会被绘制出来 |
|
| destination-out | 原有内容中与新图形不重叠的部分会被保留 |
|
| source-atop | 新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上 |
|
| destination-atop | 原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形 |
|
| lighter | 两图形中重叠部分作加色处理 |
|
| darker | 两图形中重叠的部分作减色处理 |
|
| xor | 重叠的部分会变成透明 |
|
| copy | 只有新图形会被保留，其它都被清除掉 |
|
蓝色 表示先绘制的图形、红色 表示后绘制的图形
3.浏览器支持： Internet Explorer 9、Firefox、Opera、Chrome、Safari 支持globalCompositeOperation 属性
通过Context的globalCompositeOperation我们可以灵活的掌握绘制图形之间层叠显示关系，做出很多漂亮的显示效果。接下来我们就使用globalCompositeOperation=destination-out来实现一个刮刮卡的效果。
4.globalCompositeOperation属性应用
刮刮卡实现效果
5.实现原理
- 在页面上放一个
div容器，设置这个div的宽高、把机器猫的图片设为背景, - 在div中放一个
canvas标签，设置canvas的宽高和父容器div的一样。 - 获取canvas的context对象绘制一个以灰色为背景宽高和canvas宽高相同的矩形，这样机器猫背景图就被遮住了，只能看见一个灰色的背景。
- canvas绑定鼠标mousedown,mousemove和mouseup事件(移动端绑定事件分别是：touchstart,touchmove,touchend)，设置鼠标按下标志，鼠标按下或者鼠标按下并且移动时记录鼠标坐标值。
- 鼠标点击或者按住鼠标移动的时候开始绘图，绘图的时候设置
context.globalCompositeOperation='destination-out'根据上面属性的解释，原有图形（灰色矩形）与新图形（画的线条）不重叠的部分会被保留，所以画过线条的部分不会被保留就可以看见下面机器猫图片背景了。 - 鼠标抬起设置鼠标按下标志为false，清空坐标数组。
6.代码实现
6.1这里的方式是通过点击的次数来计算，是否全部清除的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* { margin: 0; padding: 0; } .box { width: 100%; min-height: 360px; background-image: url("http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/1.jpg"); background-repeat: no-repeat; background-size: 30% 30%; background-position: center; }
</style>
</head>
<body>
<!-- 背景图 -->
<div id='box' class="box"></div>
<!-- 重置按钮 -->
<button id="btn">重置</button>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script>
// 判断鼠标或手者指点击的次数，从而清除画布
var totalNum = 0;
// 画布信息
var myCanvasObject;
var ctx;
// 画布的宽高，根据背景图来获取
var width = document.getElementById("box").offsetWidth - 2;
var height = document.getElementById("box").offsetHeight;
// 鼠标或者手指事件的相关参数
var isDown = false; //鼠标是否按下标志
var pointerArr = []; //鼠标移动坐标数组
var xPointer = 0;//鼠标当前x坐标
var yPointer = 0;//鼠标当前y坐标
// 进入页面先初始化刮刮卡
init();
// 清空画布
$("#btn").on("click", function () {
if (myCanvasObject) {
//绘制黑色矩形 ，将蒙层充满
initBlackRect();
} else {
init();
}
})
// 绘制画布的黑色矩形
function initBlackRect() {
ctx.beginPath();
ctx.fillStyle = "#939393";
ctx.rect(0, 0, width, height);
ctx.closePath();
ctx.fill();
}
// 清空画布,重置点击次数
function clearRect() {
ctx.clearRect(0, 0, width, height);
totalNum = 0;
}
// 初始化画布的方法
function init() {
if (!document.getElementById("myCanvas")) {
var canvas = document.createElement("canvas");
canvas.setAttribute("width", width + "px");
canvas.setAttribute("height", height + "px");
canvas.setAttribute("style", "border:1px solid green");
canvas.id = "myCanvas";
document.getElementById("box").appendChild(canvas);
}
myCanvasObject = document.getElementById("myCanvas");
ctx = myCanvasObject.getContext("2d");
//绘制黑色矩形
initBlackRect();
//pc，移动事件兼容写法
var hastouch = "ontouchstart" in window ? true : false,
tapstart = hastouch ? "touchstart" : "mousedown",
tapmove = hastouch ? "touchmove" : "mousemove",
tapend = hastouch ? "touchend" : "mouseup";
//鼠标按下
myCanvasObject.addEventListener(tapstart, function (event) {
var e = window.event || event;//2017-12-06
this.style.cursor = "move";
isDown = true;
xPointer = hastouch ? e.targetTouches[0].pageX : e.clientX - this.offsetLeft;
yPointer = hastouch ? e.targetTouches[0].pageY : e.clientY - this.offsetTop;;
pointerArr.push([xPointer, yPointer]);
circleReset(ctx);
});
//鼠标按下后拖动
myCanvasObject.addEventListener(tapmove, function (event) {
var e = window.event || event;//2017-12-06
if (isDown) {
xPointer = hastouch ? e.targetTouches[0].pageX : e.clientX - this.offsetLeft;;
yPointer = hastouch ? e.targetTouches[0].pageY : e.clientY - this.offsetTop;;
pointerArr.push([xPointer, yPointer]);
circleReset(ctx);
}
});
//鼠标抬起取消事件
myCanvasObject.addEventListener(tapend, function (event) {
totalNum += 1;
isDown = false;
pointerArr = [];
// 这里可以设置一个点击的最大次数
// 当到达最大点击次数时，清除画布
// 画布清空，只需要重置一下宽高即可
// 这里是通过手指点击的次数来计算的，但你知道手指点击时绘制的面积，然后就可计算点击几次能达到你所需的面积大小
// 虽然这种统计的面积方法不太准确，但在接受范围内
if (totalNum == 2) {
clearRect()
}
});
//圆形橡皮檫
function circleReset(ctx) {
ctx.save();
ctx.beginPath();
ctx.moveTo(pointerArr[0][0], pointerArr[0][1]);
ctx.lineCap = "round"; //设置线条两端为圆弧
ctx.lineJoin = "round"; //设置线条转折为圆弧
ctx.lineWidth = 60;
ctx.globalCompositeOperation = "destination-out";
if (pointerArr.length == 1) {
ctx.lineTo(pointerArr[0][0] + 1, pointerArr[0][1] + 1);
} else {
for (var i = 1; i < pointerArr.length; i++) {
ctx.lineTo(pointerArr[i][0], pointerArr[i][1]);
ctx.moveTo(pointerArr[i][0], pointerArr[i][1]);
}
}
ctx.closePath();
ctx.stroke();
ctx.restore();
}
}
</script>
</body>
</html>6.2.转自地址：https://www.jianshu.com/p/3fef68afd139
7.另一种实现方式 (强烈推荐)
7.1通过 cavans的getImageData 以像素点的个数来计算，挂过的面积来衡量
7.2代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
min-height: 360px;
background-image: url("http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/1.jpg");
background-repeat: no-repeat;
background-size: 30% 30%;
background-position: center;
}
</style>
</head>
<body>
<!-- 背景图 -->
<div id='box' class="box"></div>
<!-- 重置按钮 -->
<button id="btn">重置</button>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script>
// 画布信息
var myCanvasObject;
var ctx;
// 画布的宽高，根据背景图来获取
var width = document.getElementById("box").offsetWidth - 2;
var height = document.getElementById("box").offsetHeight;
// 鼠标或者手指事件的相关参数
var isDown = false; //鼠标是否按下标志
var pointerArr = []; //鼠标移动坐标数组
var xPointer = 0; //鼠标当前x坐标
var yPointer = 0; //鼠标当前y坐标
// 进入页面先初始化刮刮卡
init();
// 清空画布
$("#btn").on("click", function() {
if(myCanvasObject) {
//绘制黑色矩形 ，将蒙层充满
initBlackRect();
} else {
init();
}
})
// 绘制画布的黑色矩形
function initBlackRect() {
ctx.beginPath();
ctx.fillStyle = "#939393";
ctx.rect(0, 0, width, height);
ctx.closePath();
ctx.fill();
}
// 清空画布,重置点击次数
function clearRect() {
ctx.clearRect(0, 0, width, height);
}
// 初始化画布的方法
function init() {
if(!document.getElementById("myCanvas")) {
var canvas = document.createElement("canvas");
canvas.setAttribute("width", width + "px");
canvas.setAttribute("height", height + "px");
canvas.setAttribute("style", "border:1px solid green");
canvas.id = "myCanvas";
document.getElementById("box").appendChild(canvas);
}
myCanvasObject = document.getElementById("myCanvas");
ctx = myCanvasObject.getContext("2d");
//绘制黑色矩形
initBlackRect();
//pc，移动事件兼容写法
var hastouch = "ontouchstart" in window ? true : false,
tapstart = hastouch ? "touchstart" : "mousedown",
tapmove = hastouch ? "touchmove" : "mousemove",
tapend = hastouch ? "touchend" : "mouseup";
//鼠标按下
myCanvasObject.addEventListener(tapstart, function(event) {
var e = window.event || event; //2017-12-06
this.style.cursor = "move";
isDown = true;
xPointer = hastouch ? e.targetTouches[0].pageX : e.clientX - this.offsetLeft;
yPointer = hastouch ? e.targetTouches[0].pageY : e.clientY - this.offsetTop;;
pointerArr.push([xPointer, yPointer]);
circleReset(ctx);
});
//鼠标按下后拖动
myCanvasObject.addEventListener(tapmove, function(event) {
var e = window.event || event; //2017-12-06
if(isDown) {
xPointer = hastouch ? e.targetTouches[0].pageX : e.clientX - this.offsetLeft;;
yPointer = hastouch ? e.targetTouches[0].pageY : e.clientY - this.offsetTop;;
pointerArr.push([xPointer, yPointer]);
circleReset(ctx);
// 在这里是通过像素点来计算，挂过的面积方式来的，比较好
handleFilledPercentage(getFilledPercentage());
}
});
//鼠标抬起取消事件
myCanvasObject.addEventListener(tapend, function(event) {
isDown = false;
pointerArr = [];
});
//圆形橡皮檫
function circleReset(ctx) {
ctx.save();
ctx.beginPath();
ctx.moveTo(pointerArr[0][0], pointerArr[0][1]);
ctx.lineCap = "round"; //设置线条两端为圆弧
ctx.lineJoin = "round"; //设置线条转折为圆弧
ctx.lineWidth = 60;
ctx.globalCompositeOperation = "destination-out";
if(pointerArr.length == 1) {
ctx.lineTo(pointerArr[0][0] + 1, pointerArr[0][1] + 1);
} else {
for(var i = 1; i < pointerArr.length; i++) {
ctx.lineTo(pointerArr[i][0], pointerArr[i][1]);
ctx.moveTo(pointerArr[i][0], pointerArr[i][1]);
}
}
ctx.closePath();
ctx.stroke();
ctx.restore();
}
// 计算已经刮过的区域占整个区域的百分比
function getFilledPercentage() {
let imgData = ctx.getImageData(0, 0, width, height);
// imgData.data是个数组，存储着指定区域每个像素点的信息，数组中4个元素表示一个像素点的rgba值
let pixels = imgData.data;
let transPixels = [];
for(let i = 0; i < pixels.length; i += 4) {
// 严格上来说，判断像素点是否透明需要判断该像素点的a值是否等于0，
// 为了提高计算效率，这儿设置当a值小于128，也就是半透明状态时就可以了
if(pixels[i + 3] < 128) {
transPixels.push(pixels[i + 3]);
}
}
return(transPixels.length / (pixels.length / 4) * 100).toFixed(2) + '%'
}
// 设置阈值，去除灰色涂层
function handleFilledPercentage(percentage) {
percentage = percentage || 0;
if(parseInt(percentage) > 50) {
// 当像素点的个数超过 50% 时，清空画布，显示底图
ctx.clearRect(0, 0, width, height);
}
}
}
</script>
</body>
</html>8.也可通过这个
8.1 TumoH.min.js
var TumoH = function(e) { function t(e) { for(var t = e.offsetLeft, o = e.offsetTop; e = e.offsetParent;) t += e.offsetLeft, o += e.offsetTop; return { oLeft: t, oTop: o } } function o() { var e = "ontouchstart" in window ? !0 : !1, t = e ? "touchstart" : "mousedown", o = e ? "touchmove" : "mousemove", f = e ? "touchend" : "mouseup"; d.lineCap = "round", d.lineJoin = "round", d.lineWidth = 2 * u, d.globalCompositeOperation = "destination-out", r.addEventListener(t, function(t) { function u(t) { clearTimeout(i), t.preventDefault(), x2 = e ? t.targetTouches[0].pageX - m : t.clientX - r.offsetLeft, y2 = e ? t.targetTouches[0].pageY - p : t.clientY - r.offsetTop, d.save(), d.moveTo(n, a), d.lineTo(x2, y2), d.stroke(), d.restore(), n = x2, a = y2 } clearTimeout(i), t.preventDefault(), n = e ? t.targetTouches[0].pageX - m : t.clientX - r.offsetLeft, a = e ? t.targetTouches[0].pageY - p : t.clientY - r.offsetTop, d.save(), d.beginPath(), d.arc(n, a, 1, 0, 2 * Math.PI), d.fill(), d.restore(), r.addEventListener(o, u), r.addEventListener(f, function() { r.removeEventListener(o, u), i = setTimeout(function() { for(var e = d.getImageData(0, 0, r.width, r.height), t = 0, o = 0; o < e.width; o += l) for(var n = 0; n < e.height; n += l) { var a = 4 * (n * e.width + o); e.data[a + 3] > 0 && t++ } t / (e.width * e.height / (l * l)) < c && T && (s(), T = !1) }, g) }) }) } var n, a, i, r = document.getElementById(e.cavId), f = e.ImgSRC, s = e.callBack, e = e || {}, u = e.oR || 20, c = 1 - e.maxPro || .8, h = r.parentNode, d = r.getContext("2d"), g = 100, l = 30; r.width = h.clientWidth, r.height = h.clientHeight; var v = new Image; v.src = f, v.onload = function() { d.drawImage(v, 0, 0, r.width, r.height), o() }; var m = t(r).oLeft, p = t(r).oTop, T = !0 };8.2 html 部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0; } .rowCenter { display: flex; display: -webkit-flex; display: -moz-flex; -webkit-box-pack: center; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; } .rowAndColCenter { display: flex; display: -webkit-flex; display: -moz-flex; flex-direction: column; -webkit-flex-direction: column; -moz-flex-direction: column; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; align-items: center; -webkit-align-items: center; -moz-align-items: center; } .indexB{ background-color: rgba(0,0,0,0.5); padding-bottom: 20px; } .indexB-guabgOut{ width: 574px; height: 252px; margin-top: 100px; position: relative; background-color: #fff; } .indexB-guabgStart { width: 537px; height: 220px; position: absolute; left: 18px; top: 16px; } .indexB-guabgEnd { width: 537px; height: 220px; line-height: 220px; text-align: center; color: #ff722c; font-weight: bold; font-size: 50px; box-shadow: 0px 0px 14px 3px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 14px 3px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 14px 3px rgba(0,0,0,0.1); background-repeat: no-repeat; background-position: center; background-size: 124px 124px; background-image: url('data:image/gif;base64,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'); } .chongzhi{ width: 200px; height: 80px; line-height: 80px; text-align: center; background-color: orange; color: #fff; font-size: 20px; }
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="indexB rowCenter" style="">
<!-- 刮刮卡背景图 -->
<div class="indexB-guabgOut rowAndColCenter" style="">
<!-- 未刮奖 -->
<div class="indexB-guabgStart bgimgeAbsCenter100">
<canvas class="canvas" id="myCanvas">sorry, 浏览器不支持canvas</canvas>
</div>
<!-- 刮奖结果 -->
<div class="indexB-guabgEnd line1" style=""></div>
</div>
</div>
<div class="chongzhi">重置</div>
<script src="TumoH.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 刮刮卡，未刮状态的图片
var ImgSRC = 'data:image/gif;base64,R0lGODlhMgLAAMQAAMbGxnNzc6CgoLOzs4uLi8HBwaqqqr29vXl5eZWVlX9/f7i4uIWFhaWlpa+vr5ubm5CQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCRjk0ODcxMzU0NkMxMUU1QjNCQkU3QUUzMTY2QzMyQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCRjk0ODcxNDU0NkMxMUU1QjNCQkU3QUUzMTY2QzMyQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkJGOTQ4NzExNTQ2QzExRTVCM0JCRTdBRTMxNjZDMzJCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkJGOTQ4NzEyNTQ2QzExRTVCM0JCRTdBRTMxNjZDMzJCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJy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';
// loading图片
var loadingbg = 'data:image/gif;base64,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';
// 白底
var guabgEndbg_ff = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhkAAADcCAYAAADdoLOlAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkZDNzk3QzY3ODBGMzExRTk5REEwOURCM0UwRjJERTI5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkZDNzk3QzY4ODBGMzExRTk5REEwOURCM0UwRjJERTI5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RkM3OTdDNjU4MEYzMTFFOTlEQTA5REIzRTBGMkRFMjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RkM3OTdDNjY4MEYzMTFFOTlEQTA5REIzRTBGMkRFMjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7MJ6ItAAAEP0lEQVR42uzbT0rUcRzG8VHJVl3AhKCkC7TyFkq6km4QhEFKHkD8s3HTDdopavdQhHaBgkJeIFrUDKLPBxWmYQSx78LF6wVP/hhafVZvxp8jvV6vM8R4NnOz6Wzi5jMAgN/Zz+wo28u+Zd3B/zQyJDJms41syg0BgHs4zpaz3bsiYyxbzZbcCgB4gPqSYiW7GIyMdYEBADQIjeX+yJjLtt0FAGhgPtupyKgXOk+ySTcBABo4z15WZCzk4at7AAANvRvtXP+ZKgBASzP1TcZpHl64BQDQ0FlFxp88PHULAKChbkXGpTsAAK2JDABAZAAAIgMAEBkiAwAQGQCAyAAARAYAgMgAAEQGACAyAABEBgAgMgAAkQEAIDIAAJEBAIgMAACRAQCIDABAZAAAiAwAQGQAACIDAEBkAAAiAwAQGQAAIgMAEBkAgMgAABAZAIDIAABEBgCAyAAARAYAIDIAAEQGACAyAACRAQAgMgAAkQEAiAwAAJEBAIgMAEBkAACIDABAZAAAIgMAQGQAACIDABAZAAAiAwAQGQCAyAAAEBkAgMgAAEQGAIDIAABEBgAgMgAARAYAIDIAAJEBACAyAACRAQCIDAAAkQEAiAwAQGQAAIgMAEBkAAAiAwBAZAAAIgMAEBkAACIDABAZAIDIAAAQGQCAyAAARAYAgMgAAEQGACAyAABEBgAgMgAAkQEAIDIAAJEBAIgMAEBkiAwAQGQAACIDABAZzgAAiAwAQGQAACIDAEBkAAAiAwAQGQAAIgMAEBkAgMgAABAZAIDIAABEBgCAyAAARAYAIDIAAEQGACAyAACRAQAgMgAAkQEAiAwAAJEBAIgMAEBkAACIDABAZAAAIgMAQGQAACIDABAZAAAiAwAQGQCAyAAAEBkAgMgAAEQGAIDIAABEBgAgMgAARAYAIDIAAJEBACAyAACRAQCIDAAAkQEAiAwAQGQAAIgMAEBkAAAiAwBAZAAAIgMAEBkAACIDABAZAIDIAAAQGQCAyAAARAYAgMgAAEQGACAyAABEBgAgMgAAkQEAIDIAAJEBAIgMAACRAQCIDABAZAAAiAwAQGQAACIDAEBkAAAiAwAQGQAAIgMAEBkAgMgAAESGyAAARAYAIDIAAJEhMgAAkQEAiAwAQGQAAIgMAEBkAAAiAwBAZAAAIgMAEBkAACIDABAZAIDIAAAQGQCAyAAARAYAgMgAAEQGACAyAABEBgAgMgAAkQEAIDIAgEcZGb/y85lTAAANdSsyfuThtVsAAA2djeaf7+4AADR2UJGx7w4AQGP79euS8TycZJPuAQA0cJ69qm8yutlH9wAAGlnM/tY3GbcfbGSf3AUA+A+b2VI99EfGWLaVvXcfAOABvmQfsovByLj1NlvLptwKALiH4+xzttP/4bDIKPUy6Hw2m73JnmdP3BAAiIqHernzMNvLtjvX73j+40qAAQC41XUtrQQS9AAAAABJRU5ErkJggg==';
canvasStart();
function canvasStart(){
TumoH({
cavId:'myCanvas', //canvas的id(string)
oR:40, //涂抹半径大小(number)
ImgSRC:ImgSRC, //涂抹的图片地址src(string)
callBack:function(){ //涂抹达到比例后执行的函数(function)
finish_tumo();
},
maxPro:0.1 //涂抹比例(number)
})
}
//涂抹
function finish_tumo(){
setTimeout(function(){
$("#myCanvas").hide();
setTimeout(function(){
$(".indexB-guabgEnd").css({'background-image':'url('+guabgEndbg_ff+')','background-size': '100% 100%'});
$(".indexB-guabgEnd").text("恭喜获得大奖");
},100)
},100);
}
$(".chongzhi").on("click",function(){
$("#myCanvas").show();
canvasStart();
setTimeout(function(){
setTimeout(function(){
$(".indexB-guabgEnd").css({'background-image':'url('+loadingbg+')','background-size': '124px 124px'});
$(".indexB-guabgEnd").text("");
},100);
},100);
});
</script>
</body>
</html>8.3 效果
8.4 说明
在H5活动中尽量使用flex少使用 position: absolute 来；
9.也可以
9.1html
（1）Lottery.js
function Lottery(id, cover, coverType, width, height, drawPercentCallback) {
this.conId = id;
this.conNode = document.getElementById(this.conId);
this.cover = cover;
this.coverType = coverType;
this.background = null;
this.backCtx = null;
this.mask = null;
this.maskCtx = null;
this.lottery = null;
this.lotteryType = 'image';
this.width = width || 300;
this.height = height || 100;
this.clientRect = null;
this.drawPercentCallback = drawPercentCallback;
}
Lottery.prototype = {
createElement: function (tagName, attributes) {
var ele = document.createElement(tagName);
for (var key in attributes) {
ele.setAttribute(key, attributes[key]);
}
return ele;
},
getTransparentPercent: function(ctx, width, height) {
var imgData = ctx.getImageData(0, 0, width, height),
pixles = imgData.data,
transPixs = [];
for (var i = 0, j = pixles.length; i < j; i += 4) {
var a = pixles[i + 3];
if (a < 128) {
transPixs.push(i);
}
}
var percent = (transPixs.length / (pixles.length / 4) * 100).toFixed(2);
if(parseInt(percent)>50){
ctx.clearRect(0, 0, width, height);
}
return percent;
},
resizeCanvas: function (canvas, width, height) {
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').clearRect(0, 0, width, height);
},
drawPoint: function (x, y) {
this.maskCtx.beginPath();
var radgrad = this.maskCtx.createRadialGradient(x, y, 0, x, y, 30);
radgrad.addColorStop(0, 'rgba(0,0,0,0.6)');
radgrad.addColorStop(1, 'rgba(255, 255, 255, 0)');
this.maskCtx.fillStyle = radgrad;
this.maskCtx.arc(x, y, 30, 0, Math.PI * 2, true);
this.maskCtx.fill();
if (this.drawPercentCallback) {
this.drawPercentCallback.call(null, this.getTransparentPercent(this.maskCtx, this.width, this.height));
}
},
bindEvent: function () {
var _this = this;
var device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
var clickEvtName = device ? 'touchstart' : 'mousedown';
var moveEvtName = device? 'touchmove': 'mousemove';
if (!device) {
var isMouseDown = false;
document.addEventListener('mouseup', function(e) {
isMouseDown = false;
}, { passive: false });
} else {
document.addEventListener("touchmove", function(e) {
if (isMouseDown) {
e.preventDefault();
}
}, { passive: false });
document.addEventListener('touchend', function(e) {
isMouseDown = false;
}, { passive: false });
}
this.mask.addEventListener(clickEvtName, function (e) {
isMouseDown = true;
var docEle = document.documentElement;
if (!_this.clientRect) {
_this.clientRect = {
left: 0,
top:0
};
}
var x = (device ? e.touches[0].clientX : e.clientX) - _this.clientRect.left + docEle.scrollLeft - docEle.clientLeft;
var y = (device ? e.touches[0].clientY : e.clientY) - _this.clientRect.top + docEle.scrollTop - docEle.clientTop;
_this.drawPoint(x, y);
}, false);
this.mask.addEventListener(moveEvtName, function (e) {
if (!device && !isMouseDown) {
return false;
}
var docEle = document.documentElement;
if (!_this.clientRect) {
_this.clientRect = {
left: 0,
top:0
};
}
var x = (device ? e.touches[0].clientX : e.clientX) - _this.clientRect.left + docEle.scrollLeft - docEle.clientLeft;
var y = (device ? e.touches[0].clientY : e.clientY) - _this.clientRect.top + docEle.scrollTop - docEle.clientTop;
_this.drawPoint(x, y);
}, false);
},
drawLottery: function () {
this.background = this.background || this.createElement('canvas', {
style: 'position:absolute;left:0;top:0;'
});
this.mask = this.mask || this.createElement('canvas', {
style: 'position:absolute;left:0;top:0;'
});
if (!this.conNode.innerHTML.replace(/[\w\W]| /g, '')) {
this.conNode.appendChild(this.background);
this.conNode.appendChild(this.mask);
this.clientRect = this.conNode ? this.conNode.getBoundingClientRect() : null;
this.bindEvent();
}
this.backCtx = this.backCtx || this.background.getContext('2d');
this.maskCtx = this.maskCtx || this.mask.getContext('2d');
if (this.lotteryType == 'image') {
var image = new Image(),
_this = this;
image.onload = function () {
_this.resizeCanvas(_this.background, _this.width, _this.height);
_this.backCtx.drawImage(this, 0, 0,_this.width, _this.height);
_this.drawMask();
}
image.src = this.lottery;
} else if (this.lotteryType == 'text') {
this.width = this.width;
this.height = this.height;
this.resizeCanvas(this.background, this.width, this.height);
this.backCtx.save();
this.backCtx.fillStyle = '#FFF';
this.backCtx.fillRect(0, 0, this.width, this.height);
this.backCtx.restore();
this.backCtx.save();
var fontSize = 30;
this.backCtx.font = 'Bold ' + fontSize + 'px Arial';
this.backCtx.textAlign = 'center';
this.backCtx.fillStyle = '#F60';
this.backCtx.fillText(this.lottery, this.width / 2, this.height / 2 + fontSize / 2);
this.backCtx.restore();
this.drawMask();
}
},
drawMask: function() {
this.resizeCanvas(this.mask, this.width, this.height);
if (this.coverType == 'color') {
this.maskCtx.fillStyle = this.cover;
this.maskCtx.fillRect(0, 0, this.width, this.height);
this.maskCtx.globalCompositeOperation = 'destination-out';
} else if (this.coverType == 'image'){
var image = new Image(),
_this = this;
image.onload = function () {
_this.maskCtx.drawImage(this, 0, 0);
_this.maskCtx.globalCompositeOperation = 'destination-out';
}
image.src = this.cover;
}
},
init: function (lottery, lotteryType) {
this.lottery = lottery;
this.lotteryType = lotteryType || 'image';
this.drawLottery();
}
}
（2）html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Lottery Demo</title>
<style type="text/css"> *{ margin: 0; padding: 0; } body { height: 1000px; } #lotteryContainer { position: relative; width: 300px; height: 100px; position: absolute; left: 50%; margin-left: -150px; top: 200px; } #drawPercent { color: #F60; } </style>
</head>
<body>
<button id="freshBtn">刷新彩票</button><label>已刮开 <span id="drawPercent">0%</span> 区域。</label>
<div id="lotteryContainer"></div>
<script src="Lottery.js"></script>
<script>
window.onload = function() {
var lottery = new Lottery('lotteryContainer', '#CCC', 'color', 200, 200, drawPercent);
lottery.init('http://www.baidu.com/img/bdlogo.gif', 'image');
document.getElementById('freshBtn').onclick = function() {
drawPercentNode.innerHTML = '0%';
lottery.init(getRandomStr(10), 'text');
}
var drawPercentNode = document.getElementById('drawPercent');
function drawPercent(percent) {
drawPercentNode.innerHTML = percent + '%';
}
}
function getRandomStr(len) {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for(var i = 0; i < len; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
</script>
</body>
</html>9.2效果
10.说明：
（1）画布清空：https://blog.csdn.net/inuyasha1121/article/details/53925538
（2）面积的处理问题
①(参考问题回答区域)：https://bbs.csdn.net/topics/390998715
②也可这样处理：https://ask.csdn.net/questions/352384
（3）推荐：
①这个也比较好：https://blog.csdn.net/XuM222222/article/details/82353729
③ 推荐：
https://blog.csdn.net/zhouziyu2011/article/details/67640749
（4）转载地址
① https://github.com/artwl/Lottery
② https://www.cnblogs.com/jscode/p/3580878.html
5356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
