canvas中裁切(橡皮檫)的應用--探照燈,點選去除遮罩
阿新 • • 發佈:2020-08-20
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>