The clip() method in canvas is used to cut arbitrary shapes and sizes from the original canvas. Once an area is clipped, all subsequent drawing will be limited to the clipped 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 time in the future through the restore() method.
Next, use the clip() method to achieve a searchlight effect.
</iframe><button id=btn>Transform</button><button id=con>Pause</button><canvas id=canvas width=400 height=290 style=border:1px solid black>The current browser does not support it canvas, please change the browser and try again</canvas><script> btn.onclick = function(){history.go();}con.onclick = function(){ if(this.innerHTML == 'pause'){ this.innerHTML = 'resume'; clearInterval(oTimer); }else{ this.innerHTML = 'pause'; oTimer = setInterval(fnInterval,50); }} var canvas = document.getElementById('canvas'); //Storage canvas width and height var H=290,W=400; //Storage searchlight var ball = {}; //Storage photos var IMG; //Storage 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); }//Welcome to join the full-stack development exchange Learn and communicate together in the circle: 582735936 ]//For 1-3 front-end personnel} //Help break through technical bottlenecks and improve thinking skills} } } 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; } //Lower side if(ele.y >= H - ele.r ){ ele.y = H - ele.r; ele.stepY = -ele.stepY; }} function render(){ //Reset the canvas height to achieve the effect of clearing 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 use Without clip(), the canvas background image will appear in the clip() area cxt.drawImage(IMG,0,0); cxt.restore(); }//Welcome to join the full-stack development exchange circle to learn and communicate together: 582735936 ]//For 1-3 front-end personnel} //Help break through technical bottlenecks and improve thinking skills}} initial();clearInterval(oTimer); function fnInterval( ){ //Update motion status update(); //Render render(); } var oTimer = setInterval(fnInterval,50); </script>The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.