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 9FirefoxOperaChromeSafari 支持globalCompositeOperation 属性

通过Context的globalCompositeOperation我们可以灵活的掌握绘制图形之间层叠显示关系,做出很多漂亮的显示效果。接下来我们就使用globalCompositeOperation=destination-out来实现一个刮刮卡的效果。

4.globalCompositeOperation属性应用

刮刮卡实现效果

5.实现原理

  1. 在页面上放一个div容器,设置这个div的宽高、把机器猫的图片设为背景,
  2. 在div中放一个canvas标签,设置canvas的宽高和父容器div的一样。
  3. 获取canvas的context对象绘制一个以灰色为背景宽高和canvas宽高相同的矩形,这样机器猫背景图就被遮住了,只能看见一个灰色的背景。
  4. canvas绑定鼠标mousedown,mousemove和mouseup事件(移动端绑定事件分别是:touchstart,touchmove,touchend),设置鼠标按下标志,鼠标按下或者鼠标按下并且移动时记录鼠标坐标值。
  5. 鼠标点击或者按住鼠标移动的时候开始绘图,绘图的时候设置context.globalCompositeOperation='destination-out'根据上面属性的解释,原有图形(灰色矩形)与新图形(画的线条)不重叠的部分会被保留,所以画过线条的部分不会被保留就可以看见下面机器猫图片背景了。
  6. 鼠标抬起设置鼠标按下标志为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://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

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页