Canvas to achieve "searchlight" co-

Simple style:

body{
    margin:0;
    padding:0;
}
#canvas {
    Display:block;
    position:relative;
    Margin:auto;
}

To create a drawing label:

<canvas id= "Canvas" >
    Your browser is not supported, please upgrade your browser or download the Chrome browser experience
</canvas>

Specific implementation:

var ball={
X:200,
Y:200,
r:150,
Vx:7+math.random (),
Vy:3+math.random ()
};
var B = true;
window.onload= function () {
var Canvas=document.getelementbyid ("Canvas");
var context=canvas.getcontext (' 2d ');
Canvas.width=window.innerwidth;
Canvas.height=window.innerheight;
if (context) {//Determine if canvas is supported
SetInterval (function () {
Draw (Context,canvas.width,canvas.height);
Ballmove (Canvas.width,canvas.height);
},50);

Canvas.addeventlistener ("click", Function () {
var x = Event.clientx-canvas.getboundingclientrect (). Left;
var y = Event.clienty-canvas.getboundingclientrect (). Top;
var click_this=context.ispointinpath (x, y);
if (click_this) {
B = false;
}else {
B = true;
}
});
}else {
Alert ("Your browser does not support, please upgrade your browser or download the Chrome browser experience");
}
};
function Ballmove (canvasw,canvash) {
if (B) {
Ball.x + = BALL.VX;
Ball.y + = Ball.vy;
}
if (ball.y >= CANVASH-BALL.R | | ball.y <= BALL.R) {
Ball.vy =-Ball.vy;
}
if (ball.x >= CANVASW-BALL.R | | ball.x <= BALL.R) {
BALL.VX =-BALL.VX;
}
Return ball
}

function Draw (context,w,h) {
Console.log ("Still in progress");
Context.clearrect (0,0,w, H);
Context.save ();

Context.beginpath ();
Context.fillstyle = "BLACK";
Context.fillrect (0,0,w, H);
Context.closepath ();

Context.beginpath ();
Context.arc (ball.x,ball.y,ball.r,0,math.pi*2);
Context.fillstyle = "#fff";
Context.fill ();
Context.clip ();

var imgs=new Image ();
Imgs.src= ". /imgs/c1.jpg ";
Context.fillstyle = Context.createpattern (IMGs, "repeat");
Context.fill ();

Context.restore ();
}

Canvas to achieve "searchlight" co-