The clip() method in canvas is used to cut arbitrary shapes and sizes from the original canvas. Once an area is cut, all subsequent drawings are confined 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 through the restore() method at any time in the future.
Next, use the clip() method to achieve a searchlight effect
<button >Transform</button>
<button >pause</button>
<canvas width="400" height="290" style="border:1px solid black">The current browser does not support itcanvas，Please change the browser and try again</canvas>
<script>
= function(){();}
= function(){
if( == 'pause'){
= 'recover';
clearInterval(oTimer);
}else{
= 'pause';
oTimer = setInterval(fnInterval,50);
}
}
var canvas = ('canvas');
//Storage canvas width and heightvar H=290,W=400;
//Storage searchlightvar ball = {};
//Storage photosvar IMG;
//Storage photo addressvar URL = '/uploads/rs/26/ddzmgynp/';
function initial(){
if(){
var cxt = ('2d');
var tempR = (()*30+20);
var tempX = (()*(W-tempR) + tempR);
var tempY = (()*(H-tempR) + tempR)
ball = {
x:tempX,
y:tempY,
r:tempR,
stepX:(() * 21 -10),
stepY:(() * 21 -10)
};
IMG = ('img');
=URL;
= function(){
(IMG,0,0);
}
}
}
function update(){
+= ;
+= ;
bumpTest(ball);
}
function bumpTest(ele){
//Left side if( <= ){
= ;
= -;
}
//On the right if( >= W - ){
= W - ;
= -;
}
//Upper side if( <= ){
= ;
= -;
}
//The lower side if( >= H - ){
= H - ;
= -;
}
}
function render(){
//Reset the canvas height to achieve the effect of clearing the canvas = H;
if(){
var cxt = ('2d');
();
//Black the canvas background ();
= '#000';
(0,0,W,H);
// Rendering searchlight ();
(,,,0,2*);
= '#000';
();
();
//Because clip() is used, the canvas background image will appear in the clip() area (IMG,0,0);
();
}
}
initial();
clearInterval(oTimer);
function fnInterval(){
//Update the motion status update();
//Render render();
}
var oTimer = setInterval(fnInterval,50);
</script>
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!