纯原生js+html实现移动端刮刮乐效果
2019-08-09 本文已影响0人
MiSiTeWang
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#main {
width: 100%;
padding: 20px 0;
background-color: red;
}
.canvasBox {
width: 78%;
height: 160px;
border-radius: 10px;
background-color: #FFF;
margin-left: 11%;
line-height: 160px;
text-align: center;
position: relative;
}
#canvas {
width: 96%;
height: 96%;
position: absolute;
left: 2%;
top: 2%;
background-color: transparent;
}
</style>
</head>
<body>
<!-- 大的背景盒子-->
<div id="main">
<!-- 定位的盒子-->
<div class="canvasBox">
<!-- 放内容的盒子-->
<span id="prize">
恭喜发财，红包拿来
</span>
<!-- 蒙版画布-->
<canvas id="canvas"></canvas>
</div>
</div>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
/* 画布偏移量，下面用到的时候再介绍*/
var arr = getOffset(canvas);
var oLeft = arr[0];
var oTop = arr[1];
/* 初始化画布*/
ctx.beginPath();
ctx.fillStyle = '#ccc';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.closePath();
/* 增加触摸监听*/
document.addEventListener("touchstart", function () {
/* 初始化画笔*/
ctx.beginPath();
/* 画笔粗细*/
ctx.lineWidth = 30;
/* 设置组合效果*/
ctx.globalCompositeOperation = 'destination-out';
/* 移动画笔原点*/
ctx.moveTo(event.touches[0].pageX - oLeft, event.touches[0].pageY - oTop);
}, false)
document.addEventListener("touchmove", function () {
/* 根据手指移动画线，使之变透明*/
ctx.lineTo(event.touches[0].pageX - oLeft, event.touches[0].pageY - oTop);
/* 填充*/
ctx.stroke();
})
/* 之所以会用到下面的那个函数getOffset（obj）
* 是因为event.touches[0].pageX、pageY获取的是相对于可视窗口的距离
* 而lineTo画笔的定位是根据画布位置定位的
* 所以就要先获取到画布(canvas)相对于可视窗口的距离，然后计算得出触摸点相对于画布的距离
* */
/* 获取该元素到可视窗口的距离*/
function getOffset(obj) {
var valLeft = 0, valTop = 0;
function get(obj) {
valLeft += obj.offsetLeft;
valTop += obj.offsetTop;
/* 不到最外层就一直调用，直到offsetParent为body*/
if (obj.offsetParent.tagName != 'BODY') {
get(obj.offsetParent);
}
return [valLeft, valTop];
}
return get(obj);
}
</script>
</html>
