實現刮刮卡
瞭解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>
後記
喜歡我的小夥伴可以關注我哦，分享學習筆記，相互交流 ↓↓↓↓↓↓↓
