canvas绘制刮刮卡，超过一定面积显示全图
说明：栗子转自简书，在他的基础上添加了重置和超过一定面积显示全图，仅做学习使用。（推荐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这里的方式是通过点击的次数来计算，是否全部清除的
Document
6.2.转自地址：https://www.jianshu.com/p/3fef68afd139
7.另一种实现方式 (强烈推荐)
7.1通过 cavans的getImageData 以像素点的个数来计算，挂过的面积来衡量
7.2代码部分
Document
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 部分
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
Lottery Demo
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://github.com/xm2by/fragment/blob/master/canvas%E5%AE%9E%E8%B7%B5/%E5%88%AE%E5%88%AE%E5%8D%A1.html
③ 推荐：
https://blog.csdn.net/zhouziyu2011/article/details/67640749
（4）转载地址
① https://github.com/artwl/Lottery
② https://www.cnblogs.com/jscode/p/3580878.html