实现刮刮卡
了解canvas的透明设置
ImageData对象
ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：
width:图片宽度，单位是像素
height:图片高度，单位是像素
data:Uint8ClampedArray类型的一维数组，
包含着RGBA格式的整型数据，范围在0至255之间（包括255）
R:0 --> 255(黑色到白色)
G:0 --> 255(黑色到白色)
B:0 --> 255(黑色到白色)
A:0 --> 255(透明到不透明)
得到场景像素数据
getImageData():获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据
ctx.getImageData(sx, sy, sw, sh)
sx:将要被提取的图像数据矩形区域的左上角 x 坐标。
sy:将要被提取的图像数据矩形区域的左上角 y 坐标。
sw:将要被提取的图像数据矩形区域的宽度。
sh:将要被提取的图像数据矩形区域的高度。
全局透明度的设置
globalAlpha = value
这个属性影响到 canvas 里所有图形的透明度，
有效的值范围是 0.0 （完全透明）到 1.0（完全不透明）
默认是 1.0
覆盖合成
source:新的图像(源)
destination:已经绘制过的图形(目标)
globalCompositeOperation
source-over(默认值):源在上面,新的图像层级比较高
source-in :只留下源与目标的重叠部分(源的那一部分)
source-out :只留下源超过目标的部分
source-atop:砍掉源溢出的部分
.
destination-over:目标在上面,旧的图像层级比较高
destination-in:只留下源与目标的重叠部分(目标的那一部分)
destination-out:只留下目标超过源的部分
destination-atop:砍掉目标溢出的部分
实现刮刮卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"></meta>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
#wrap,
ul,
ul>li {
height: 100%;
}
ul>li {
background: url(img/b.png);
background-size: 100% 100%;
}
canvas {
position: absolute;
left: 0;
top: 0;
transition: 1s;
}
</style>
</head>
<body>
<div id="wrap">
<canvas></canvas>
<ul>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var canvas = document.querySelector("canvas");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "img/a.png";
img.onload = function() {
draw();
}
function draw() {
var flag = 0;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
canvas.addEventListener("touchstart", function(ev) {
ev = ev || event;
var touchC = ev.changedTouches[0];
var x = touchC.clientX - canvas.offsetLeft;
var y = touchC.clientY - canvas.offsetTop;
ctx.globalCompositeOperation = "destination-out";
ctx.lineWidth = 40;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.save();
ctx.beginPath();
// ctx.arc(x,y,20,0,360*Math.PI/180);
ctx.moveTo(x, y);
ctx.lineTo(x + 1, y + 1)
ctx.stroke();
ctx.restore();
})
canvas.addEventListener("touchmove", function(ev) {
ev = ev || event;
var touchC = ev.changedTouches[0];
var x = touchC.clientX - canvas.offsetLeft;
var y = touchC.clientY - canvas.offsetTop;
ctx.save();
// ctx.arc(x,y,20,0,360*Math.PI/180);
ctx.lineTo(x, y)
ctx.stroke();
ctx.restore();
})
canvas.addEventListener("touchend", function() {
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
var allPx = imgData.width * imgData.height;
for (var i = 0; i < allPx; i++) {
if (imgData.data[4 * i + 3] === 0) {
flag++;
}
}
if (flag >= allPx / 2) {
canvas.style.opacity = 0;
}
})
canvas.addEventListener("transitionend", function() {
this.remove();
})
}
}
}
</script>
</html>
后记
喜欢我的小伙伴可以关注我哦，分享学习笔记，相互交流 ↓↓↓↓↓↓↓
