canvas–刮刮樂效果，常見於電商網站的刮獎環節
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>Title</title>
<style>
body{
-moz-user-select: none;
-webkit-user-select: none;
position: relative;
}
#cav1,#cav2{
border: 1px solid red;
position: absolute;
}
</style>
</head>
<body>
<canvas id="cav1" width="400" height="300"></canvas>
<canvas id="cav2" width="400" height="300"></canvas>
<script>
var cav1 = document.getElementById('cav1');
var cav2 = document.getElementById('cav2');
var cax1 = cav1.getContext('2d');
var cax2 = cav2.getContext('2d');
cax1.font = ('100px 微軟雅黑');
cax1.fillText('哈哈哈',50,150);
cax2.fillStyle = '#ddd';
cax2.fillRect(0,0,400,300);
cax2.fill();
cax2.globalCompositeOperation = 'destination-out';
var offsetX = cav2.offsetLeft;
var offsetY = cav2.offsetTop;
var mousedown = false;
function eventDown(e){
e.preventDefault();
mousedown = true;
}
function eventUp(e){
e.preventDefault();
mousedown = false;
}
//touches是當前屏幕上所有觸摸點的列表;
//targetTouches是當前對象上所有觸摸點的列表;
//changedTouches是涉及當前事件的觸摸點的列表。
function eventMove(e){
e.preventDefault();
if(mousedown){
if(e.changedTouches){
e=e.changedTouches[e.changedTouches.length-1];
}
var x = (e.clientX + document.body.scrollLeft) - offsetX || 0;
var y = (e.clientY + document.body.scrollTop) - offsetY || 0;
cax2.beginPath();
cax2.fillStyle = 'rgba(0,0,0,1)';
cax2.arc(x,y,20,0,2*Math.PI);
cax2.fill();
cax2.closePath();
}
}
cav2.addEventListener('touchstart', eventDown);
cav2.addEventListener('touchend', eventUp);
cav2.addEventListener('touchmove', eventMove);
cav2.addEventListener('mousedown', eventDown);
cav2.addEventListener('mouseup', eventUp);
cav2.addEventListener('mousemove', eventMove);
</script>
</body>
</html>