canvas Realizes Searchlight Effect

  • 2021-07-18 06:30:41
  • OfStack

The clip () method in canvas is used to cut arbitrary shapes and dimensions from the original canvas. 1 Once an area is cut, all subsequent drawings are restricted to the cut area (other areas on the canvas cannot be accessed)

You can also save the current canvas area by using the save () method before using the clip () method and restore it at any later time by using the restore () method

Next, use the clip () method to achieve a searchlight effect


<button id="btn"> Transformation </button>
<button id="con"> Suspend </button>
<canvas id="canvas" width="400" height="290" style="border:1px solid black"> The current browser does not support canvas Please change your browser and try again </canvas>
<script>
btn.onclick = function(){history.go();}
con.onclick = function(){
 if(this.innerHTML == ' Suspend '){
  this.innerHTML = ' Recovery ';
  clearInterval(oTimer);
 }else{
  this.innerHTML = ' Suspend '; 
  oTimer = setInterval(fnInterval,50);
 }
}
var canvas = document.getElementById('canvas');
// Storage canvas width and height 
var H=290,W=400;
// Storage searchlight 
var ball = {};
// Save photos 
var IMG;
// Store photo address 
var URL = 'http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg';
function initial(){
 if(canvas.getContext){
  var cxt = canvas.getContext('2d');
  var tempR = Math.floor(Math.random()*30+20);
  var tempX = Math.floor(Math.random()*(W-tempR) + tempR);
  var tempY = Math.floor(Math.random()*(H-tempR) + tempR)  
  ball = {
   x:tempX,
   y:tempY,
   r:tempR,
   stepX:Math.floor(Math.random() * 21 -10),
   stepY:Math.floor(Math.random() * 21 -10)
  };
  IMG = document.createElement('img');
  IMG.src=URL;
  IMG.onload = function(){
   cxt.drawImage(IMG,0,0);
  } 
 } 
}
function update(){
 ball.x += ball.stepX;
 ball.y += ball.stepY; 
 bumpTest(ball);
}
function bumpTest(ele){
 // Left side 
 if(ele.x <= ele.r){
  ele.x = ele.r;
  ele.stepX = -ele.stepX;
 }
 // Right side 
 if(ele.x >= W - ele.r){
  ele.x = W - ele.r;
  ele.stepX = -ele.stepX;
 }
 // Upper side 
 if(ele.y <= ele.r){
  ele.y = ele.r;
  ele.stepY = -ele.stepY;
 }
 // Underside 
 if(ele.y >= H - ele.r){
  ele.y = H - ele.r;
  ele.stepY = -ele.stepY;
 }
}
function render(){
 // Reset the canvas height to empty the canvas 
 canvas.height = H; 
 if(canvas.getContext){
  var cxt = canvas.getContext('2d');
  cxt.save();
  // Blacken the canvas background 
  cxt.beginPath();
  cxt.fillStyle = '#000';
  cxt.fillRect(0,0,W,H);
  // Render searchlight 
  cxt.beginPath();
  cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
  cxt.fillStyle = '#000';
  cxt.fill(); 
  cxt.clip();  
  // Due to the use of clip() The canvas background image appears in the clip() Within the region 
  cxt.drawImage(IMG,0,0);
  cxt.restore();
 }
}
initial();
clearInterval(oTimer);
function fnInterval(){
 // Update motion status 
 update();
 // Render 
 render(); 
}
var oTimer = setInterval(fnInterval,50);
</script>

Related articles: