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>