canvas中裁切（橡皮檫）的应用--探照灯，点击去除遮罩
1. 点击去除遮罩，显露出下面的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas width="500" height="407"></canvas>
<script>
var canvas=document.querySelector("canvas");
var ctx=canvas.getContext("2d");
ctx.fillRect(0,0,canvas.width,canvas.height); //画板上的遮罩，默认为黑色
var img=new Image();
img.addEventListener("load",loadHandler);
img.src="./img/16.jpg";
function loadHandler(e){
canvas.addEventListener("mousedown",mouseHandler);
}
function mouseHandler(e){
if(e.type==="mousedown"){
canvas.addEventListener("mousemove",mouseHandler);
canvas.addEventListener("mouseup",mouseHandler);
canvas.addEventListener("mouseleave",mouseHandler);
}else if(e.type==="mousemove"){
ctx.save();
ctx.beginPath();
ctx.arc(e.offsetX,e.offsetY,10,Math.PI/180*0,Math.PI/180*360);
ctx.clip();
ctx.drawImage(img,0,0,500,407); //每次移动都是加载新的图片到画板上
ctx.restore();
}else{
canvas.removeEventListener("mousemove",mouseHandler);
canvas.removeEventListener("mouseup",mouseHandler);
canvas.removeEventListener("mouseleave",mouseHandler);
}
}
</script>
</body>
</html>
2.探照灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas width="500" height="404"></canvas>
<script>
var canvas=document.querySelector("canvas");
var ctx=canvas.getContext("2d");
var x=50;
var y=50;
var speedX=2;
var speedY=3;
ctx.fillRect(0,0,500,404);
var img=new Image();
img.addEventListener("load",loadHandler);
img.src="./img/20.jpg";
function loadHandler(e){
setInterval(animation,16);
}
function animation(){
x+=speedX; //探照灯的移动
y+=speedY;
if(x<50 || x>500-50) speedX=-speedX;
if(y<50 || y>404-50) speedY=-speedY;
ctx.save();
ctx.fillStyle="#000000";
ctx.fillRect(0,0,500,404);
ctx.beginPath();
ctx.arc(x,y,50,Math.PI/180*0,Math.PI/180*360); //探照灯的初始位置
ctx.fill();
ctx.clip();
ctx.drawImage(img,0,0,500,404);
ctx.restore();
}
</script>
</body>
</html>
