canvas实现“探照灯”共能

简单的样式：

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

创建绘图标签：

<canvas id="canvas">    您的浏览器不支持，请用升级浏览器或下载chrome浏览器体验</canvas>

具体实现：

var ball={    x:200,    y:200,    r:150,    vx:7+Math.random()*5,    vy:3+Math.random()*5};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){//判断是否支持canvas        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("您的浏览器不支持，请用升级浏览器或下载chrome浏览器体验");    }};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("还在进行");    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();}